Jquery Expand Collapse (Expand all / collapse all)

There are some good tutorials available for expand collapse which are created using jquery toggle. Last week i was looking for one tutorial where i can not only expand collapse individual boxes but i want a button to expand all / collapse all feature.

Html Part

<div class="wrapper">
<div class="expand_top"><div class="expand_all"></div></div>
<div class="expand_wrapper">
	<h2 class="expand_heading"><a href="#">Wordpress Theme Development</a></h2>
	
	<div class="toggle_container">
		<div class="box">
			<h3>Wordpress Theme Development</h3>
			
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		</div>
	</div>
	
	<h2 class="expand_heading"><a href="#">Magento E-commerce</a></h2>

	<div class="toggle_container">
		<div class="box">
			<h3>Need Shopping website?</h3>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		</div>

	</div>
</div>
</div>

CSS PART

h2.expand_heading {
	padding: 0 0 0 20px;
	margin: 0 0 5px 0;
	background: url(expand-collapse.png) no-repeat;
	height: 38px;
	line-height: 38px;
	width: 400px;
	font-size: 2em;
	font-weight: normal;
	float: left;
}
.expand_all
{
cursor:default;
}
h2.expand_heading a {
	color: #fff;
	text-decoration: none;
	display: block;
}
h2.expand_heading a:hover {
	color: #ccc;
}

h2.active {background-position: left bottom;}
.toggle_container {
	margin: 0 0 5px;
	padding: 0;
	border-top: 1px solid #d6d6d6;
	background: #ffffff;
	overflow: hidden;
	font-size: 1.2em;
	width: 400px;
	clear: both;
}
.toggle_container .box {
	padding: 20px;
}
.toggle_container .box p {
	padding: 5px 0;
	margin: 5px 0;
}
.toggle_container h3 {
	font: 2.0em normal Georgia, "Times New Roman", Times, serif;
	margin: 0 0 5px;
	padding: 0 0 5px 0;
	color:#000000;
	border-bottom: 1px dotted #ccc;
}
.toggle_container img {
	float: left;
	margin: 10px 15px 15px 0;
	padding: 5px;
	background: #ddd;
	border: 1px solid #ccc;
}
.expand_all
{
width:116px;
height:29px;
background:url(extra-buttons.png) no-repeat top left;
float:right;
cursor: pointer; 
}
.expanded
{
background-position:bottom left;
}

Jquery Part

<script type="text/javascript">
$(document).ready(function(){
	$(".toggle_container").hide();
	$("h2.expand_heading").toggle(function(){
		$(this).addClass("active"); 
		}, function () {
		$(this).removeClass("active");
	});
	$("h2.expand_heading").click(function(){
		$(this).next(".toggle_container").slideToggle("slow");
	});
	$(".expand_all").toggle(function(){
		$(this).addClass("expanded"); 
		}, function () {
		$(this).removeClass("expanded");
	});
	$(".expand_all").click(function(){
		$(".toggle_container").slideToggle("slow");
	});
});
</script>

Jquery Expand Collapse Simple Example Demo & Download

[btn_details href=”https://snilesh.com/blog/demo/expand-collapse/”]Demo[/btn_details]

[btn_details href=”https://snilesh.com/blog/demo/expand-collapse.zip”]Download[/btn_details]

Other Resources Else Where

8 thoughts on “Jquery Expand Collapse (Expand all / collapse all)

    1. you can display first image using the “Featured Thumbnail” feature which is added after wordpress 2.9 to display the first image.

      You can check more details about it at
      WordPress Featured Thumbnail

      for the expand collapse

      add this css code inside your themes style.css file also make sure to add additional styles to it.

      .toggle_container
      {
      display:none;
      /*
      add your additional style width and all the other things.
      */
      }
      .read_more
      {
      background: none repeat scroll 0 0 #69D2E7;
          color: #FFFFFF;
          font-size: 0.92em;
          font-weight: bold;
          line-height: 1;
          margin-left: 74px;
          padding: 2px 5px 0;
          text-transform: uppercase;
      /* change this style as you want..*/
      }
      

      call wordpress function inside a div like

       
      <a href="#" class="read_more">Read More</a>
      <div class="toggle_container">
      <?php the_content(); ?>
      </div>
      

      Add jquery inside your themes header.php file inside

      <head></head>

      tag. and add this additional jquery code to achieve the toggle effect.

      <script type="text/javascript">
      $(document).ready(function(){
          $(".toggle_container").hide();
          $("a.read_more").toggle(function(){
              $(this).text("CLOSE POST");
              }, function () {
              $(this).text("READ POST");
          });
          $("a.read_more").click(function(){
              $(this).next(".toggle_container").slideToggle("slow");
          });
      });
      </script>
      
      1. Thank you, this helps, but I’m having a problem. I’ve updated the style.css, header.php, and inserted the wordpress function and it hides the post, however When the “read more” link is clicked, nothing happens.. I’ve tried to find the issue, I’ve even applied the same effect on different themes just to make sure that wasn’t an issue..

        thanks for any help.

        1. sorry, I just realized that I place the jquery.js in the theme folder, not in the main folder… whole day= wasted.

          any tips on the best way to implement this on an image/button rather than a text link?

          1. just show me where you are implementing this. you can email me details if you don’t want to put it here. send me details so i can give you example. use contact us form to send details.

Leave a Reply

Your email address will not be published. Required fields are marked *