Question

I have a working toggle function that expands and collapses but my list when expanded is very long and I wanted to put a “Close” link at the bottom to enable collapse so my users don’t have to scroll to top to click and collapse. Any ideas how I can modify this code to expand it’s functionality for my purposes?

<script language="javascript">
$(function(){
$(".formname").toggle(function(){
var id=$(this).attr('id');
$("#form"+id).fadeIn('slow');
},function(){
var id=$(this).attr('id');
$("#form"+id).fadeOut('slow');
}); 
});
</script>

my html looks like:

<ul>
<li><a href="#" id="formxyz" class="formname">My Expanding/Collapsing Data</a></li>
<div style="display:none;">
<ul>
<li>Content</li>
</ul>
</div>
</ul>

if I insert the same link li at the bottom before the closing ul the user has to click it twice to collapse. I’d prefer a single click solution.

<ul>
<li><a href="#" id="formxyz" class="formname">My Expanding/Collapsing Data</a></li>
<div style="display:none;">
<ul>
<li>Content</li>
<li><a href="#" id="formxyz" class="formname">Close</a></li>
</ul>
</div>
</ul>

Answer 1

If you use toggle() event on formxyz, the new close action will break the original rule, therefore sometimes you have to click formxyz twice to show content.

So use click() event with fadeToggle() action on formxyz. It will show content while it’s hiding.

Then add a class on all “close”, use parents method to find it’s parents div (it should be the content div), then hide it.

The html:

 <div style="background-color: gray">
  <li><a href="#" id="xyz" class="formname">My Expanding/Collapsing Data</a></li>
  <div id="formxyz" class="content" style="display:none">
    <ul>
      <li>Content</li>
      <li><a href="#" class="closeform">Close</a></li>
    </ul>
  </div>​
</div>

The js file:

$(function(){
  $(".formname").click(function(){
    var id=$(this).attr('id');
    $("#form"+id).fadeToggle('slow').focus();
  }); 

  $(".closeform").click(function(){
    $(this).parents("div.content").fadeOut('slow');
  });
});

​

OR Check emulate code on jsFiddle. It’s executable.