How To Show And Hide Fieldset Content On Click Of The Legend May 03, 2024 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 Demowindow.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")); }); }) CopyCSS:.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; } CopyFiddle hereBaca JugaHow Can You Flip Website Upside Down In Ie ? (for The April 1st)Making A Td ClickableNivo Slider Custom Height/width ProblemsSolution 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>CopyI'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 postsIs It A Good Idea To Use Transfer-encoding: Chunked On Static Files?Can I File_put_contents To Send To An Http Web Address?Fixed Sidebar And Fluid Content AreaHow To Filter Ng-repeat Value On Clicking Of Checkbox Field In Angularjs? 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"