CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Samia Naveed
Samia Naveed

Reputation: 101

How I can set drop down menu set when click on check box?

i want to set drop down menu . when I click on Check-box Physics then open the sub category. other wise not open.Here a some code.. i want to set this menu in table form..any one can help me..tell me How can set jquery.

<table >
<tr>
        <td valign="top">Disciplines :</td>
        <td><table>
            <tr>
            
         <td width="30"><input type="checkbox" name="Physics" /></td>
              <td width="200">Physics
              <table style="display:none;">
            <tr>
              <td width="30"><input type="checkbox" name="Acoustics" /></td>
              <td width="200">Acoustics</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Cosmology" /></td>
              <td width="200">Cosmology</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Nuclear Physics" /></td>
              <td width="200">Nuclear Physics</td>
               </tr>
          </table>
                    
                    <td width="30"><input type="checkbox" name="Chemistry" /></td>
              <td width="200">Chemistry
              <table style="display:none;">
            <tr>
              <td width="30"><input type="checkbox" name="Chromatography" /></td>
              <td width="200">Chromatography</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Catalysis" /></td>
              <td width="200">Catalysis</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Geochemistry" /></td>
              <td width="200">Geochemistry</td>
                    </tr>
          </table>
               </tr>
          </table>
              </td>
                
                </tr>
                
            
          
            
          </table>  
          </td>
      </tr>
</table>

Upvotes: 1

Views: 967

Answers (4)

Vandervals
Vandervals

Reputation: 6064

You could do this with css as well. Imagine you have this checkbox and the menu as a sibling:

<input type="checkbox" class="switcher">
<ul class="menu">
  <li>Home</li>
  <li>Products</li>
  <li>Info</li>
  <li>Contact</li>
</ul>

Then you could set the max-height to 0 by default and expand it when the checkbox is :checked

.menu{
  overflow:hidden;
  background: red;
  width: 150px;
  max-height: 0px;
  transition: max-height 0.6s ease;
}
.switcher:checked + .menu{
  max-height: 100px;
}

Here is a pen: http://codepen.io/vandervals/pen/pJgmZV

Upvotes: 0

Thomas
Thomas

Reputation: 508

I have slightly modified your code and PFB the source and hope it helps

HTML

function showhidetables(value) {


  if (value == "1") {
    document.getElementById('phisycs').style.display = "table";
    document.getElementById('Chemistry').style.display = "none";
    document.getElementById("PhysicsCheck").checked = true;
    document.getElementById("ChemistryCheck").checked = false;
  }
  if (value == "2") {
    document.getElementById('phisycs').style.display = "none";
    document.getElementById('Chemistry').style.display = "table";
    document.getElementById("PhysicsCheck").checked = false;
    document.getElementById("ChemistryCheck").checked = true;
  }
}
<table>
  <tr>
    <td valign="top">Disciplines :</td>
    <td>
      <table>
        <tr>

          <td width="30">
            <input type="checkbox" id="PhysicsCheck" name="Physics" onClick="showhidetables('1')" />
          </td>
          <td width="200">Physics
            <table id="phisycs" style="display: none;">
              <tr>
                <td width="30">
                  <input type="checkbox" name="Acoustics" />
                </td>
                <td width="200">Acoustics</td>
              </tr>
              <tr>
                <td width="30">
                  <input type="checkbox" name="Cosmology" />
                </td>
                <td width="200">Cosmology</td>
              </tr>
              <tr>
                <td width="30">
                  <input type="checkbox" name="Nuclear Physics" />
                </td>
                <td width="200">Nuclear Physics</td>
              </tr>
            </table>
            <td width="30">
              <input type="checkbox" name="Chemistry" id="ChemistryCheck" onClick="showhidetables('2')" />
            </td>
            <td width="200">Chemistry
              <table style="display: none;" id="Chemistry">
                <tr>
                  <td width="30">
                    <input type="checkbox" name="Chromatography" />
                  </td>
                  <td width="200">Chromatography</td>
                </tr>
                <tr>
                  <td width="30">
                    <input type="checkbox" name="Catalysis" />
                  </td>
                  <td width="200">Catalysis</td>
                </tr>
                <tr>
                  <td width="30">
                    <input type="checkbox" name="Geochemistry" />
                  </td>
                  <td width="200">Geochemistry</td>
                </tr>
              </table>
        </tr>
      </table>
      </td>

  </tr>
</table>

Upvotes: 1

Roy Sonasish
Roy Sonasish

Reputation: 4609

I hope this will work for you

$('input[name="Physics"]').on('click', function() {
    $('.physicsTable').slideToggle();
})

$('input[name="Chemistry"]').on('click', function() {
    $('.cheTable').slideToggle();
})

Working Demo

Upvotes: 3

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Try this:

$('input[name=Physics], input[name=Chemistry]').on('click', function(){
  if($(this).is(':checked')){
       $(this).parent().next().find('table').show();
  }else{
        $(this).parent().next().find('table').hide();
    }
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td valign="top">Disciplines :</td>
    <td>
      <table>
        <tr>

          <td width="30">
            <input type="checkbox" name="Physics" />
          </td>
          <td width="200">Physics
            <table style="display:none;">
              <tr>
                <td width="30">
                  <input type="checkbox" name="Acoustics" />
                </td>
                <td width="200">Acoustics</td>
              </tr>
              <tr>
                <td width="30">
                  <input type="checkbox" name="Cosmology" />
                </td>
                <td width="200">Cosmology</td>
              </tr>
              <tr>
                <td width="30">
                  <input type="checkbox" name="Nuclear Physics" />
                </td>
                <td width="200">Nuclear Physics</td>
              </tr>
            </table>

            <td width="30">
              <input type="checkbox" name="Chemistry" />
            </td>
            <td width="200">Chemistry
              <table style="display:none;">
                <tr>
                  <td width="30">
                    <input type="checkbox" name="Chromatography" />
                  </td>
                  <td width="200">Chromatography</td>
                </tr>
                <tr>
                  <td width="30">
                    <input type="checkbox" name="Catalysis" />
                  </td>
                  <td width="200">Catalysis</td>
                </tr>
                <tr>
                  <td width="30">
                    <input type="checkbox" name="Geochemistry" />
                  </td>
                  <td width="200">Geochemistry</td>
                </tr>
              </table>
        </tr>
      </table>
      </td>

  </tr>




</table>
</td>
</tr>
</table>

Upvotes: 1

Related Questions