toggleClass can be responsive

by Drew Fierst

HTML

<div class="container">
  <h2>
  Title One
  </h2>
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor iaculis arcu eget dapibus. Maecenas id libero enim. Sed consequat enim tortor, in rutrum nisl vestibulum vitae. Sed aliquam ac metus eu varius. Mauris enim mi, pharetra id libero id, finibus maximus ipsum. Mauris pellentesque, ipsum viverra hendrerit faucibus, tellus risus luctus mi, a varius justo nisi vel orci. Nam dignissim ultricies nibh, sed dictum tortor sodales nec.
  </div>
   <h2>
  Title Two
  </h2>
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor iaculis arcu eget dapibus. Maecenas id libero enim. Sed consequat enim tortor, in rutrum nisl vestibulum vitae. Sed aliquam ac metus eu varius. Mauris enim mi, pharetra id libero id, finibus maximus ipsum. Mauris pellentesque, ipsum viverra hendrerit faucibus, tellus risus luctus mi, a varius justo nisi vel orci. Nam dignissim ultricies nibh, sed dictum tortor sodales nec.
  </div>
</div>

CSS

h2 {
  background-color: #B0B0B0;
  color: #000098;
  cursor: pointer;
}
.content {
  background-color: #FFFFFF;
  padding: 1em;
  overflow: hidden;
  -webkit-transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
}

@media screen and (min-width: 40em) {
  .content {
    max-height: 0;
    padding: 0;
  }
  .content.open {
    max-height: 400px;
    padding: 1em;
  }
}

JavaScript

$(function() {
	$('h2').click(function() {
  	$(this).next().toggleClass('open');
  });
});