jQuery Toggle issue with Sidebar - Can't Show/Hide Sidebar?


#1

Hi

I try to show-hide my sidebar (use it for navigation) with this js:

      $(document).ready(function() {
    $(".sidebar-toggle").click(function() {
      $(".sidebar-open").slideToggle("slow");
      $(this).toggleClass("active");
    });
  });

.sidebar-toggle is button, .sidebar-open is css class with style: display:block - and i have other css, .sidebar that is display:none

Need to work right? But don`t work. I can check site here.

Why this simple code don`t work? I search answer from 2 days… Where is my mustake


#2

this is probably happening because your

[quote=“detelin_markov, post:1, topic:959”] $(this).toggleClass(“active”); [/quote]

is active.


#3

There is no such class as “active” in your stylesheet so what exactly are you passing? You are passing the correct function but since the active class is not declared in your CSS, that is why no style is being applied.

Sidebar Toggle

Use the code below which would work just perfectly

$(document).ready(function() {  
$(".sidebar-toggle").click(function(){$(".sidebar-open").slideToggle("slow");});
});

Using the above function you don’t need to use inline-javascript as you did with

<script type='text/javascript'>
      function Show_Div(Div_id) {
        if (false == $(Div_id).is(':visible')) {
                                  $(Div_id).show(250);
            }
            else {
            $(Div_id).hide(250);
      }
      }
    </script>

Make the HTML as this

<button class="sidebar-toggle" style="height: 72px;">
<span class="screen-reader-text">
          Toggle Sidebar
        </span>
</button>

Dropdown toggle

Also for the dropdown toggle of menu list you can use this script call:

$(".dropdown-toggle").click(function(){$(".sub-menu").slideToggle("slow");});

Make its HTML as this

<button class="dropdown-toggle"></button>

It would work just fine because I just inserted these scripts in your template through browser console and it worked just fine :smile:


Console Error - I can't find where is the problem?