How to show/hide content using jquery 'show()' or 'hide()'

I am trying to Make sure the sidebar is opened (using show(), when the button with id #open-sidebar is clicked. And, closes/hide() if clicked on button with id #close-sidebar I have created the following functions to achieve it. The functions are not working??

function showSidebar() {
  $('#open-sidebar').show();
}

function hideSidebar() {
  $('#close-sidebar').hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
  <!-- Close button for sidebar -->
  <button id="close-sidebar" class="btn-square pull-right sidebar-control" onclick="hideSidebar()">
          <i class="fa fa-close"></i>
       </button>
  <h2><i class="fa fa-globe"></i> Cities</h2>
  <ul id="citylist" class="list-group">
    <li>India</li>
  </ul>
</nav>

<header id="mainview-header" class="header topbar text-white">
  <!-- Menu button for opening the sidebar -->
  <button id="open-sidebar" class="btn-square pull-left sidebar-control" onclick="showSidebar()">
         <i class="fa fa-bars"></i>
      </button>
  <h1 id="city" class="pull-left text-center city">Berlin</h1>
  <div class="clear"></div>
</header>
<div id="icon">
  <img id="iconimage" src="img/rain.png" alt="weather">
</div>
<div id="summary" class="text-center">Rain in the afternoon</div>
<div id="temperature" class="text-center">11° C</div>

3 answers

  • answered 2018-11-08 07:49 Brian H.

    You need to capture the click event on the open and close buttons, and apply the show and hide functions to the sidebar itself:

    // showSidebar
    $('#open-sidebar').click(function() {
      $('#sidebar').show();
    });
    $('#close-sidebar').click(function() {
      $('#sidebar').hide();
    });
    

  • answered 2018-11-08 07:51 Jack Bashford

    You're using the wrong selectors. You want to hide and show the navbar not the buttons:

    function showSidebar() {
        $('#menu').show();
    }
    function hideSidebar() {
        $('#menu').hide();
    }
    

  • answered 2018-11-08 07:53 guradio

    Dont mix inline with event handlers. You almost had it.

    For adding event handler use as above

    $('#open-sidebar').click(showSidebar);
    $('#close-sidebar').click(hideSidebar);
    
    function showSidebar() {
      alert('show')
    }
    
    function hideSidebar() {
      alert('hide')
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    html code for reference.
    
    <nav id="menu">
      <!-- Close button for sidebar -->
      <button id="close-sidebar" class="btn-square pull-right sidebar-control">
          <i class="fa fa-close">close</i>
       </button>
      <h2><i class="fa fa-globe"></i> Cities</h2>
      <ul id="citylist" class="list-group">
        <li>India</li>
      </ul>
    </nav>
    
    <header id="mainview-header" class="header topbar text-white">
      <!-- Menu button for opening the sidebar -->
      <button id="open-sidebar" class="btn-square pull-left sidebar-control">
         <i class="fa fa-bars">open</i>
      </button>
      <h1 id="city" class="pull-left text-center city">Berlin</h1>
      <div class="clear"></div>
    </header>
    <div id="icon">
      <img id="iconimage" src="img/rain.png" alt="weather">
    </div>
    <div id="summary" class="text-center">Rain in the afternoon</div>
    <div id="temperature" class="text-center">11° C</div>

    For inline use below

    function showSidebar() {
      alert('show')
    }
    
    function hideSidebar() {
      alert('hide')
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    html code for reference.
    
    <nav id="menu">
      <!-- Close button for sidebar -->
      <button id="close-sidebar" class="btn-square pull-right sidebar-control" onclick='hideSidebar()'>
          <i class="fa fa-close">close</i>
       </button>
      <h2><i class="fa fa-globe"></i> Cities</h2>
      <ul id="citylist" class="list-group">
        <li>India</li>
      </ul>
    </nav>
    
    <header id="mainview-header" class="header topbar text-white">
      <!-- Menu button for opening the sidebar -->
      <button id="open-sidebar" class="btn-square pull-left sidebar-control" onclick='showSidebar()'>
         <i class="fa fa-bars">open</i>
      </button>
      <h1 id="city" class="pull-left text-center city">Berlin</h1>
      <div class="clear"></div>
    </header>
    <div id="icon">
      <img id="iconimage" src="img/rain.png" alt="weather">
    </div>
    <div id="summary" class="text-center">Rain in the afternoon</div>
    <div id="temperature" class="text-center">11° C</div>