I'm trying to create a toggle content button that loads with the content already hidden. This is the code I'm using but I'm not sure how to make the content appear as hidden (making the toggle button function more used for expanding content)

$(function() {
  var b = $("#button");
  var w = $("#wrapper");
  var l = $("#list");
  
  w.height(l.outerHeight(true));

  b.click(function() {
  
    if(w.hasClass('open')) {
      w.removeClass('open');
      w.height(0);
    } else {
      w.addClass('open');
      w.height(l.outerHeight(true));
    }
  
  });
});

#wrapper {
  background: #ccc;
  overflow: hidden;
  transition: height 200ms;
}

<script src=".1.1/jquery.min.js"></script>
<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

I'm trying to create a toggle content button that loads with the content already hidden. This is the code I'm using but I'm not sure how to make the content appear as hidden (making the toggle button function more used for expanding content)

$(function() {
  var b = $("#button");
  var w = $("#wrapper");
  var l = $("#list");
  
  w.height(l.outerHeight(true));

  b.click(function() {
  
    if(w.hasClass('open')) {
      w.removeClass('open');
      w.height(0);
    } else {
      w.addClass('open');
      w.height(l.outerHeight(true));
    }
  
  });
});

#wrapper {
  background: #ccc;
  overflow: hidden;
  transition: height 200ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

• javascript
• jquery
• html
• css

5 Answers 5

Option 1: Simplified Code

You can actually simplify a fair amount by relying on CSS to define the show/hide style, and transitioning on max-height, you then simply toggle the addition of e.g. an open class to allow the height of the content to expand.

This also maintains strict separation of concerns, keeping functionality withiin Javascript and styling within CSS.

$(function() {
  var b = $("#button");
  var w = $("#wrapper");
  var l = $("#list");
  b.click(function() {
    w.toggleClass('open'); /* <-- toggle the application of the open class on click */
  });
});

#wrapper {
  background: #ccc;
  overflow: hidden;
  transition: max-height 300ms;
  max-height: 0; /* <---hide by default */
}
#wrapper.open {
  max-height: 100px; /* <---when open, allow content to expand to take up as much height as it needs, up to e.g. 100px */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

Option 2: Revised Code

Alternatively, if you wish to use your existing code, you need to change it so the default state is hidden. Do this by setting the height to zero in your CSS, removing the open class from your HTML and removing the initial height setting from your Javascript:

$(function() {
  var b = $("#button");
  var w = $("#wrapper");
  var l = $("#list");

  // w.height(l.outerHeight(true)); REMOVE THIS 

  b.click(function() {

    if (w.hasClass('open')) {
      w.removeClass('open');
      w.height(0);
    } else {
      w.addClass('open');
      w.height(l.outerHeight(true));
    }

  });
});

#wrapper {
  background: #ccc;
  overflow: hidden;
  transition: height 200ms;
  height: 0; /* <-- set this */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Toggle Expand/Collapse</button>
<!-- <div id="wrapper" class="open"> REMOVE THIS  -->
<div id="wrapper">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

you can use jquery .toggle() method

<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>  


$('#button').click(function(){
    $('#wrapper').toggle();
});  

DEMO

updated
you can add the following .css

#wrapper {
  background: #ccc;
  display:none
}  

DEMO

jQuert toggle method will help you, if you want it hidden for the first time apply style like this -> style="display:none" If you want it visible then don't add this style

Basically what toggle function does is, if your component visible then hides it and if it is hidden then shows it...

$('#button').click(function(){
    $('#wrapper').toggle();
})

below code will explain you better http://jsfiddle.net/31zfvm2u/

using CSS

You can accomplish this with just CSS:

div#wrapper {
  transition: max-height 1000ms;
  overflow: hidden;
}
#toggle:not(:checked) ~ div#wrapper {
  max-height: 0;
}
#toggle:checked ~ div#wrapper {
  max-height: 200px;
}
#toggle:checked ~ label:after {
  content: "hide"
}
#toggle:not(checked) ~ label:after {
  content: "show"
}

<input type="checkbox" id="toggle">
<label for="toggle"></label>

<div id="wrapper" class="open">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

using JavaScript

You're pretty much there. Just use $.hide and $.show instead of $.height.

A more succinct method would be $.toggle, however, which does the same as the below code.

$(function() {
  var b = $("#button");
  var w = $("#wrapper");
  var l = $("#list");
  
  w.height(l.outerHeight(true));

  b.click(function() {
    if(w.hasClass("open")) {
      w.hide();
    } else {
      w.show()
    }
    w.toggleClass("open");
  });
});

#wrapper {
  background: #ccc;
  overflow: hidden;
  transition: height 200ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

<button id="button" onclick=sample();>Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

function sample()
{
$(#wrapper).toogle();
}