Home/ Questions/Q 8956683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T14:50:27+00:00

I have a html page as below, the tags code is : <fieldset> <legend>Tags</legend>

  • 0

I have a html page as below,
enter image description here
the tags code is :

<fieldset>
          <legend>Tags</legend>
          <div>
              <label>
                <input type="checkbox" name="col" value="summary" checked="checked" />
                Name
              </label>
                  ......
                   </div>
        </fieldset>

But i want to make the page as below:
enter image description here

In this screenshot, when i click the Columns, it will be fold and the tags invisible. Any one know how to do this? Add a CSS or JS? Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>

    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!

    • 0