CODEWITHSUNDEEP
javascriptjquery
It's a trap
It's a trap

Reputation: 1353

how to select the children of clicked element by class

In my html page, there is a list of all the categories. Each category has some subcategories. I want that as a list item is clicked, its subcategories are toggled i.e. if they are visible, they should be hidden and vice versa. Also at one time, only one list item should be able to show its subcategories. I have tried this answer, but it doesn't help. I won't mind in using either JS, JQuery etc or changing the syntax altogether. My work till now is

<ul>
    <li class="outer-list-element">
        <a href="#" class="outer-list">category 1</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>

    <li class ="outer-list-element">
        <a href="#" class="outer-list">category 3</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>

css

li {
    margin-bottom: 8px;
   }
 .inner-list {
    margin-top: 10px;
    display: none;
 }

Script

$('.outer-list-element').click(function () {
    $(this).children().toggle();
})



$(".outer-list").click(function() {
$(this).siblings('.inner-list').toggle();
return false;
});

Feel free to update this fiddle https://jsfiddle.net/7vmtd2px/1/

Upvotes: 2

Views: 1902

Answers (4)

Somenath Sinha
Somenath Sinha

Reputation: 1214

Here's the same thing as Sarath's answer, but with the additional functionality of automatically collapsing the present list if it's clicked twice.

<ul>
    <li class="outer-list-element">
        <a href="#" class="outer-list">category 1</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>
    <li class="outer-list-element">
        <a href="#" class="outer-list">category 2</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#"> sub category 2</a></li>
        </ul>
    </li>
    <li class ="outer-list-element">
        <a href="#" class="outer-list">category 3</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>
</ul>

CSS: 

li {
    margin-bottom: 8px;
}
.inner-list {
    margin-top: 10px;
    display: none;
}

jQuery: 

$(document).on('click', ".outer-list", function() 
{
    $(this).parents().siblings().children(".inner-list").hide();
    $(this).siblings('.inner-list').toggle();
});

Here's the jsFiddle in case you want to see it in action.

Upvotes: 1

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

Please try following code.

$('.outer-list').click(function () {
   //Hide other ul
   $('ul .inner-list').not($(this).parent('li').find('ul')).hide();
   //Toggle clicked ul
   $(this).parent('li').find('ul').toggle();
});
li {
  margin-bottom: 8px;
}
.inner-list {
  margin-top: 10px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
        <li class="outer-list-element">
            <a href="#" class="outer-list">category 1</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#">sub category 2</a></li>
            </ul>
        </li>
        <li class="outer-list-element">
            <a href="#" class="outer-list">category 2</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#"> sub category 2</a></li>
            </ul>
        </li>
        <li class ="outer-list-element">
            <a href="#" class="outer-list">category 3</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#">sub category 2</a></li>
            </ul>
        </li>
</ul>

Upvotes: 1

Sarath Kumar
Sarath Kumar

Reputation: 2353

try With this..

$(document).on('click', ".outer-list", function() {
        $('.inner-list').hide(); //first hide all the element having class inner-list
        //$(this).siblings('.inner-list').toggle();
        $(this).next('ul').toggle(); // here is the trick
        return false;
});

and HERE is the FIDDLE

Thanks Mohit

Upvotes: 1

brk
brk

Reputation: 50326

You can create a class(showInnerList in this case) with display:block property. So on click of element you can add this class to the DOM which you want to show.

Also I am using addClass & removeClass instead of toggle. The reason is on click of any DOM,I intend to find the element which has showInnerClass and remove this same class from it & then add this same class to the sibling

HTML

<ul class="myList">
  <li class="outer-list-element">
    <a href="#" class="outer-list">category 1</a>
    <ul class="inner-list" id="inner-list">
      <li><a href="#">sub category 1</a></li>
      <li><a href="#">sub category 2</a></li>
    </ul>
  </li>
  <li class="outer-list-element">
    <a href="#" class="outer-list">category 2</a>
    <ul class="inner-list" id="inner-list_1">
      <li><a href="#">sub category 1</a></li>
      <li><a href="#"> sub category 2</a></li>
    </ul>
  </li>
  <li class="outer-list-element">
    <a href="#" class="outer-list">category 3</a>
    <ul class="inner-list" id="inner-list_2">
      <li><a href="#">sub category 1</a></li>
      <li><a href="#">sub category 2</a></li>
    </ul>
  </li>
</ul>

JS

$('.outer-list-element a').click(function() {
  $('.myList').find('ul.showInnerList').removeClass('showInnerList');
  $(this).next('ul.inner-list').addClass('showInnerList');
})

Also note that you are using same id for ul class="inner-list". id need to be unique

JSFIDDLE

Upvotes: 1

Related Questions