How To Show And Hide Fieldset Content On Click Of The Legend April 22, 2023 Post a Comment I have a html page as below, the tags code is : Tags < 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 = ""; } } } } }; Copy 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")); }); }) Copy 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; } Copy Fiddle hereBaca JugaHow To Create A Circle With Links On Border SideHow Do I Use Logo Plugin In VideojsGetting An Element To Overlap An Image 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> <script type="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> <style type="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> <div id="content"> <div id="title">Columns</div> <div id="tags_check"> <input type="checkbox" name="col" value="summary" checked="checked" /> Name1 <input type="checkbox" name="col" value="summary" checked="checked" /> Name2 </div> </div> </body> Copy 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! Share You may like these postsHow To Add A D3js Graph In Slideshow Instead Of Body?Clean Way To Show/hide Forms With AngularJS ButtonHTML5 Offline AuthenticationVimeo Player Time Tracking Using Script Post a Comment for "How To Show And Hide Fieldset Content On Click Of The Legend"
Post a Comment for "How To Show And Hide Fieldset Content On Click Of The Legend"