diff --git a/static/css/custom.css b/static/css/custom.css
index e69de29b..adb10661 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -0,0 +1,55 @@
+/* Top, right navigation button */
+input[type="checkbox"]#btn-navbar-checkbox {
+  display: none;
+}
+
+input[type="checkbox"]#btn-navbar-checkbox:not(:checked) ~ .collapse {
+  height: auto;
+}
+
+/* fix label settings for accordion */
+.accordion-toggle label {
+  font-size: unset;
+  font-weight: unset;
+  line-height: unset;
+  margin-bottom: unset;
+}
+
+.accordion .accordion-group .accordion-heading label {
+  margin-bottom: initial;
+}
+
+/* radio type accordion */
+.accordion .accordion-group input[type="radio"] {
+  display: none;
+}
+
+.accordion .accordion-group input[type="radio"] ~ .collapse {
+  height: 0;
+}
+
+.accordion .accordion-group input[type="radio"]:checked ~ .collapse {
+  height: auto;
+}
+
+/* checkbox type accordion */
+.accordion .accordion-group input[type="checkbox"] {
+  display: none;
+}
+
+.accordion .accordion-group input[type="checkbox"]:not(:checked) ~ .collapse {
+  height: auto;
+}
+
+/* Disqus comment text */
+input[type="checkbox"]#comment-accordion-toggle-checkbox:not(:checked)
+  ~ .accordion-heading
+  #comment-accordion-toggle::before {
+  content: "Click here to hide comments";
+}
+
+input[type="checkbox"]#comment-accordion-toggle-checkbox:checked
+  ~ .accordion-heading
+  #comment-accordion-toggle::before {
+  content: "Comments";
+}
diff --git a/templates/_includes/comments.html b/templates/_includes/comments.html
index 5d4de863..cf942127 100644
--- a/templates/_includes/comments.html
+++ b/templates/_includes/comments.html
@@ -28,17 +28,15 @@ <h6 style="display:none;">Comments</h6>
 
     <div class="accordion" id="accordion2">
         <div class="accordion-group">
+            <input type="checkbox" checked id="comment-accordion-toggle-checkbox">
             <div class="accordion-heading">
-                <a class="accordion-toggle disqus-comment-count comment-count"
-                   data-toggle="collapse"
-                   data-parent="#accordion2"
+                <label class="accordion-toggle"
                    {%if use_disqus %}
                    data-disqus-identifier="{{ identifier }}"
                    {% endif %}
-                   href="{{ url }}#comment_thread"
+                   for="comment-accordion-toggle-checkbox"
                    id="comment-accordion-toggle">
-                    Comments
-                </a>
+                </label>
             </div>
             <div id="comment_thread" class="accordion-body collapse">
                 <div class="accordion-inner">
@@ -64,26 +62,10 @@ <h6 style="display:none;">Comments</h6>
 
 {% macro comments_script() %}
 <script>
-    (function () {
-        if (window.location.hash.match(/^#comment-\d+$/)) {
-            $('#comment_thread').collapse('show');
-        }
-    })();
-    window.onhashchange=function(){
-        if (window.location.hash.match(/^#comment-\d+$/))
-            window.location.reload(true);
+window.addEventListener('load', (event) => {
+    if (window.location.hash.match(/^#comment-\d+$/)) {
+        document.getElementById('comment-accordion-toggle-checkbox').checked = false;
     }
-    $('#comment_thread').on('shown', function () {
-        var link = document.getElementById('comment-accordion-toggle');
-        var old_innerHTML = link.innerHTML;
-        $(link).fadeOut(200, function() {
-            $(this).text('Click here to hide comments').fadeIn(200);
-        });
-        $('#comment_thread').on('hidden', function () {
-            $(link).fadeOut(200, function() {
-                $(this).text(old_innerHTML).fadeIn(200);
-            });
-        })
-    })
+});
 </script>
 {% endmacro %}
diff --git a/templates/base.html b/templates/base.html
index c9f032fb..5ddf1874 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -55,11 +55,12 @@
             <div class="navbar navbar-static-top">
                 <div class="navbar-inner">
                     <div class="container-fluid">
-                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+                        <input type="checkbox" checked id="btn-navbar-checkbox">
+                        <label class="btn btn-navbar" for="btn-navbar-checkbox">
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
-                        </a>
+                        </label>
                         <a class="brand" href="{{ SITEURL }}/"><span class=site-name>{{ SITENAME }}</span></a>
                         <div class="nav-collapse collapse">
                             <ul class="nav pull-right top-menu">
@@ -104,7 +105,6 @@
             {% include '_includes/bestazon.html' %}
         {% endif %}
         <script src="//code.jquery.com/jquery.min.js"></script>
-        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
         <script>
             function validateForm(query)
             {
diff --git a/templates/categories.html b/templates/categories.html
index 6e1dad85..e01cd961 100644
--- a/templates/categories.html
+++ b/templates/categories.html
@@ -43,11 +43,14 @@ <h1><a href="{{ SITEURL }}/{{ CATEGORIES_URL }}">All Categories</a></h1>
         <div class="accordion" id="accordion2">
             {% for category, articles in categories %}
             <div class="accordion-group">
+                <input type="radio" name="all-categories-radio" id="{{ category.slug }}" onclick="closeRadio(this);">
                 <div class="accordion-heading">
-                    <a class="accordion-toggle list-of-categories" data-toggle="collapse" data-parent="#accordion2" href="#{{ category.slug }}-ref">
+                    <label for="{{ category.slug }}">
+                    <a class="accordion-toggle list-of-categories" href="#{{ category.slug }}-ref">
                         {% set num = articles|count %}
                         {{ category }}<span>{{ num }}</span>
                     </a>
+                    </label>
                 </div>
                 <div id="{{ category.slug }}-ref" class="accordion-body collapse">
                     <div class="accordion-inner">
@@ -79,14 +82,20 @@ <h1><a href="{{ SITEURL }}/{{ CATEGORIES_URL }}">All Categories</a></h1>
 {% block script %}
 {{ super() }}
 <script>
-    function uncollapse() {
-            $(window.location.hash).collapse({
-                toggle: true
-            })
-    }
-</script>
+var closeRadio_notChecked = true;
+var closeRadio_prevEl = undefined;
+function closeRadio(el) {
+  if (closeRadio_prevEl !== el) {
+    closeRadio_prevEl = el;
+    closeRadio_notChecked = true;
+  }
 
-<script>
-    uncollapse();
+  if (closeRadio_notChecked) {
+    closeRadio_notChecked = false;
+  } else {
+    el.checked = false;
+    closeRadio_notChecked = true;
+  }
+}
 </script>
 {% endblock script %}