Toggle code using jQuery I have here some code which is working but it seems to be a lot of coding to do here. I would really appreciate if someone could make this simpler.

&lt;!-- *********************************************** --&gt;
&lt;div class="widget search-w"&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="big-icon search icontap"&gt;&lt;a class="widget-close" data-toggle="collapse" data-target="#search"&gt;click&lt;/a&gt;

        &lt;/div&gt;
        &lt;div class="s-title"&gt;&lt;a class="widget-close closeme"&gt;Close&lt;/a&gt;&lt;/div&gt;

        &lt;div id="search" class="collapse in biz-widget"&gt;
            &lt;div&gt;                    
                &lt;?php get_search_form(); ?&gt;

                &lt;div class="widget-content"&gt;
                    &lt;h4&gt;Your recent searches&lt;/h4&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href=""&gt;search 1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href=""&gt;search 1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href=""&gt;search 1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href=""&gt;search 1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href=""&gt;search 1&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- *********************************************** --&gt;
&lt;div class="widget favourite-w"&gt;
    &lt;div class="big-icon favourite icontap2"&gt;&lt;a class="widget-close" data-toggle="collapse" data-target="#favourite"&gt;click&lt;/a&gt;&lt;/div&gt;
    &lt;div class="s-title"&gt;&lt;a class="widget-close closeme2"&gt;Close&lt;/a&gt;&lt;/div&gt;

    &lt;div id="favourite" class="collapse in biz-widget"&gt;

        &lt;ul&gt;
            &lt;li&gt;&lt;a href=""&gt;favourite page&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;favourite page&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;favourite page&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;favourite page&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;favourite page&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

    &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;/div&gt; &lt;!-- end #about --&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/div&gt;


and here is my js

$(".icontap").toggle(function(){
    $("#search").animate({height:40},200).css( "overflow", "hidden" );
    $(".search-w .widget-close").css("visibility","visible");
    $(".search-w .biz-widget").css("border-color", "#335ccc");
},function(){
    $("#search").animate({height: $("#search").get(0).scrollHeight}, 200 );
    $(".search-w .widget-close").css("visibility","visible");
    $(".search-w .biz-widget").css("border-color", "#335ccc");
});

$(".closeme").click(function(){
    $("#search").animate({height:0},200);
    $(".search-w .biz-widget").css("border-color", "#fff");
    $(".search-w .widget-close").css("visibility","hidden");
});

/*******/

$(".icontap2").toggle(function(){
    $("#favourite").animate({height:40},200).css( "overflow", "hidden" );
    $(".favourite-w .widget-close").css("visibility","visible");
    $(".favourite-w .biz-widget").css("border-color", "#335ccc");
},function(){
    $("#favourite").animate({height: $("#favourite").get(0).scrollHeight}, 200 );
    $(".favourite-w .widget-close").css("visibility","visible");
    $(".favourite-w .biz-widget").css("border-color", "#335ccc");
});

$(".closeme2").click(function(){
    $("#favourite").animate({height:0},200);
    $(".favourite-w .biz-widget").css("border-color", "#fff");
    $(".favourite-w .widget-close").css("visibility","hidden");
}); 


Or see this in fiddle.
The way I see it there are two accordion styles. 


Expand and Contract (ec) the one Section where multiple Sections can be
Expanded or Contracted.
Only one Section is Expanded at any given time. (ecp ec paired)


HTML

&lt;button class="link" type="button" onclick ="ec('s1')"&gt;Button&lt;/button&gt;
&lt;div id="s1" class="hide"&gt;

&lt;/div&gt;

&lt;button class="link" type="button" onclick ="ec('s2')"&gt;Button&lt;/button&gt;
&lt;div id="s2" class="hide"&gt;

&lt;/div&gt;
&lt;div id="s999"&gt;&lt;/div&gt;  


JS

I have two functions one for each the two EC methods.
function ec() is for EC method 1
functions ecp() is for EC method 2, pairs the current selected section with the previous.
Normally obe one of these functions is used on a web page.

The div id="s999" is for the initial value for prev so there is no null value to prev.

The reason I have var disp = div.style.display; is for when the same section is selected as previously.  I do not care if prev is expanded or contracted just contracting it is much quicker than an else if to check its display state.  But I need to remember what I am doing with the passed id.  

If the same section is clicked and I toggle the display state, if it is being expanded the prev toggle would contract it again.

The line of code:

var y=div.offsetTop;window.scrollTo(0, y-64);


Takes the expanded section and puts it at the top of the Browser window. When all are contracted, it scrolls to the very top or the page. 

The reason I use an array for the toggle is to eliminate the else if that would otherwise be required.





Working Snippet



  var toggle=[]
 toggle[''] = 'block';
    toggle['none'] = 'block';
    toggle['block'] = 'none';
    function ec(id){
      div = document.getElementById(id);
      div.style.display=toggle[div.style.display];
      var y=div.offsetTop;window.scrollTo(0, y-24);
    }



    var prev = document.getElementById('s999');
    function ecp(id){ 
      div = document.getElementById(id);
      var disp = div.style.display;
      prev.style.display='none';
      div.style.display=toggle[disp];
      prev=div;
      var y=div.offsetTop;window.scrollTo(0, y-24);
    }
body{background:#333;font-size:.8em;}
.btn1,.btn2{padding: .2em;margin:.2em 0 0 0;border-radius: 3px 3px 3px 3px;font: 700 1em Arial,Helvetica,Calibri,sans-serif;overflow: visible;border:1px solid #2985EA;color: #fff;background-color:#2985EA;
background-image: -o-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -moz-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -webkit-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -ms-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: linear-gradient(to bottom, #2ef 0%, #02f 100%);}
.btn1{width:96%;}
.btn2{width:48%;}
h3{margin:0;}
p{margin:.1em .4em;}
.s1,.s2,.s3,.s4{display:none;padding:0;margin:0;}
.s1{color:#f0f;}
.s2{color:#0f0;}
.s3{color:#f00;}
.s4{color:#0ff;}
#s999{min-height:40em;}
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;&lt;head&gt;&lt;title&gt;Expand Contract&lt;/title&gt;&lt;/head&gt;&lt;body&gt;
&lt;button class="btn1" type="button" onclick ="ec('s1')"&gt;Section One &lt;/button&gt;&lt;br/&gt;
&lt;div id="s1" class="s1"&gt;
&lt;h3&gt;This Section toggles when Section One button is clicked&lt;/h3&gt;
&lt;p&gt;Section 1 content&lt;br/&gt;goes here.&lt;/p&gt;
&lt;/div&gt;
&lt;button class="btn1" type="button" onclick ="ec('s2')"&gt;Section Two&lt;/button&gt;&lt;br/&gt;
&lt;div id="s2" class="s2"&gt;
  &lt;h3&gt;This Section toggles when Section Two button is clicked&lt;/h3&gt;
&lt;p&gt;Section 2 content&lt;br/&gt;goes here.&lt;/p&gt;
&lt;/div&gt;
&lt;button class="btn2" type="button" onclick ="ecp('s3')"&gt;Section Three &lt;/button&gt;
&lt;button class="btn2" type="button" onclick ="ecp('s4')"&gt;Section Four&lt;/button&gt;

&lt;div id="s3" class="s3"&gt;
&lt;h3&gt;This Section toggles when Section Three button is clicked&lt;br&gt;And if Expanded will Contract when Button Four is clicked&lt;/h3&gt;
&lt;p&gt;Section 3 content&lt;br/&gt;goes here.&lt;/p&gt;
&lt;/div&gt;
 &lt;div id="s4" class="s4"&gt;
  &lt;h3&gt;This Section toggles when Section Four button is clicked&lt;br&gt;And if Expanded will Contract when Button Three is clicked&lt;/h3&gt;
&lt;p&gt;Section 4 content&lt;br/&gt;goes here.&lt;/p&gt;
&lt;/div&gt;
&lt;div id="s999"&gt;&lt;/div&gt; 

&lt;div style="height:40em"&gt;&lt;p&gt;&amp;#x2002;&lt;/p&gt;&lt;/div&gt;      
  &lt;/body&gt;&lt;/html&gt;