如何使用JavaScript在ul标签内隐藏div标签

Question

Am trying to hide div tags inside ul tag. All tags are getting hidden if i use id of a ul tag. But i require first div tag to be shown and remaining div tags to be hidden.

html code is as follows:

<ul class="list inputControls ui-sortable" id="inputControlsContainer">
<div id="Radio" class="leaf">...</div>
<div id="Date" class="leaf">...</div>
<div id="Account" class="leaf">...</div>
<div id="Date1" class="leaf">...</div>
</ul>

script code:

<script>
jQuery(document).ready(function () {
var child=document.getElementById("inputControlsContainer").style.display='none';
});
</script>

Answer 1

You can use .not() along with :first selector:

$('#inputControlsContainer').find('.leaf').not(':first').hide();

---

Also, your HTML is currently invalid, you need to use <li> instead of <div> inside <ul> :

<ul class="list inputControls ui-sortable" id="inputControlsContainer">
    <li id="Radio" class="leaf">...</li>
    <li id="Date" class="leaf">...</li>
    <li id="Account" class="leaf">...</li>
    <li id="Date1" class="leaf">...</li>
</ul>

Fiddle Demo

Answer 2

Use gt :

$('#inputControlsContainer .leaf:gt(0)').hide();

Fiddle DEMO

Answer 3

Use Jquery to select li elements with the class selector, then bind an event handler to the click function. The bound function should find the next ul relevant to the selected element and call the toggle method upon it. By default the jquery toggle method will toggle the visibility of an element.

$(".current").click(function(){
  $(this).next("ul").toggle();
});

See this Example