How To Show And Hide Fieldset Content On Click Of The Legend

Question

I have a html page as below, the tags code is :

Solution 1:

It can be done by first finding all of the legend elements, then assigning an onclick handler. The handler is assigned to the first div found in the legend's parent. So this will work even if you have multiple fieldsets and legends on the same page.

jsFiddle Demo

window.onload = function(){

    var legends = document.getElementsByTagName("legend");

    for(var i=0; i<legends.length; i++)
    {
        legends[i].onclick = function()
        {
            var myDivs = this.parentNode.getElementsByTagName("div");
            var myDiv;

            if(myDivs.length > 0)
            {
                var myDiv = myDivs[0];

                if(myDiv.style.display == "")
                {
                    myDiv.style.display = "none"
                }
                else
                {
                    myDiv.style.display = "";
                }
            }
        }
    }

};

In the demo, I also added CSS to the legend cursor:pointer;, which just shows the hand when you hover over the legend (to indicate to click).

Solution 2:

You can modify the legend using CSS like you do for any other html element. Using Jquery is very simple, just have to do something like this:

Jquery:

$(function(){
    $('legend').click(function(){  
        $(this).nextAll('div').toggle();
        $(this).hasClass('hide')?($(this).attr("class", "show")):($(this).attr("class", "hide"));
    });
})

CSS:

.hide{
    padding-left: 10px;
    background: url('img/down.gif') no-repeat left middle;
}

.show:after{
    padding-left: 10px;
    background: url('img/up.gif') no-repeat left middle;
}

Fiddle here

Solution 3:

I know is not fieldset, but its design is looking exactly as the one you posted, so I guess this makes the trick. The code below is what you'r looking for, and some explanations about it are below the code:

<head><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><script>
   $(document).ready(function(){
      $('#title').click(function(){
         $('#tags_check').toggle();
      });
   })
</script><styletype="text/css">#content {
      position: relative;
      padding: 10px;
   }

   #title {
      border: 1px solid grey;
      position: absolute;
      background-color: #ccc;
      top: -5px;
      left: 15px;
      z-index: 1;
      cursor: pointer;
   }

   #tags_check {
      border: 1px solid grey;
      position: relative;
      z-index: 0;
      top: 3px;
      padding: 5px;
   }
</style></head><body><divid="content"><divid="title">Columns</div><divid="tags_check"><inputtype="checkbox"name="col"value="summary"checked="checked" /> Name1
      <inputtype="checkbox"name="col"value="summary"checked="checked" /> Name2
   </div></div></body>

I'm using jquery, because is incredible easier than writtingh any other javascript, and I'm loading the library via CDN. As you see, show or hide is pretty easy, just when the document is loaded, toggle between both states, show or hide. I include the ID of the elements (as you can see I changed the layout) to pick them up easily.

About the desing, with fieldset... is going to be complicated achieve what you posted. Better just two divs, 'position: relative' to move them easily up and down. The CSS shows z-index to put one over the oter, and this only work on relative and absolute elements, along the top and left properties. Hope you like it!

javascript magazin