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

909 views jquery
9

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();
}

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"></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>

answered question

#open-sidebar is the id of the button. You have to use the id or class of the sidebar. for example $('#idOfSidebar').show();

3 Answers

11

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();
});

posted this
3

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();
}

posted this
0

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>

posted this

Have an answer?

JD

Please login first before posting an answer.