Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
  <head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  </head>
  <body>
    <table>
      <tr>
    <td>
      <ul><li>English</li>l>
      <ul><li>hai howr are</li></ul>
      
      
      
      
      
      
      
      
      
   </ul>
      <ul><li>French</li>
      <ul><li>hai howr are</li></ul></ul>
      <ul><li>Spanish</li>
      <ul><li>hai howr are</li></ul></ul>
      <ul><li>German</li>
      <ul><li>hai howr are</li></ul></ul>
    </ul>
  </body>
</html>
 
// Initially hide everything apart from the active list item
​
// Set up a click handler that will show all the list items when the active
// element is clicked on, or makes the clicked on item the active item and hides
// the rest.
$('table tr td ul li').click(function(){
  var $parent=$(this).parent();
  if ($parent.is('.open')){
    $parent.removeClass('open');
    $(this).addClass('active')
      .siblings().removeClass('active').hide();
  }
  else {
    $parent.addClass('open').children().show();
  }
});
​
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers