CODEWITHSUNDEEP
jquerynested-lists
M.Hansen
M.Hansen

Reputation: 3

jQuery display nested ul on click of div in parent li

I am trying to get a hidden nested ul to display when a div in its parent li is clicked, and am having a heck of a time with it. As is, the initial hiding of the nested ul's works, and the div background image toggles just fine, but nothing else is working. Any suggestions?

Current code below:

HTML:

<div class="browseFields">
    <ul id="branches">
    <li><div class="buttonShow"></div><a href="#">1</a>
        <ul class="subField">
            <li><a href="#">a</a></li>
            <li><a href="#">b</a></li>
            <li><div class="buttonShow"></div> 
                <ul class="subField">
                    <li><a href="#">i</a></li>
                    <li><a href="#">ii</a></li>
                    <li><a href="#">iii</a></li>
                </ul>
                <a href="#">c</a>
            </li>
        </ul>
    </li>
    <li><a href="#">2</a></li>
    <li><div class="buttonShow"></div><a href="#">3</a>
        <ul class="subField">
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li><a href="#">c</a></li>
        </ul>
    </li>
    </ul>
</div>

Relavent CSS:

.buttonShow {
  display: inline-block;
  background: url("../assets/images/plus.png") no-repeat scroll top left;
  width: 9px;
  height: 9px; }

.buttonHide {
  display: inline-block;
  background: url("../assets/images/minus.png") no-repeat scroll top left;
  width: 9px;
  height: 9px; }

jQuery:

$(document).ready(function(){
    $('.subField').hide();
    $('.buttonShow').click(function() {
        $(this).toggleClass('buttonHide');
        $(this).parent().next('.subField').show('slow');
    });
    $('.buttonHide').click(function() {
        $(this).parent().next('.subField').hide('slow');
    });
});

Thanks so much!

Upvotes: 0

Views: 2131

Answers (4)

Ankush Jain
Ankush Jain

Reputation: 7049

I have created a working fiddle at here. Please check http://jsfiddle.net/rwb75/9/

I have made some changes in your jQuery. Also i have made some changes in your html. I have put <div class="buttonShow"><a href="#">1</a></div> anchor tag in div.

 $(document).ready(function(){
        $('.subField').hide();
        $(document).on("click",".buttonShow",function(e) {
            $(this).addClass('buttonHide');
            $(this).removeClass('buttonShow');
           $(this).closest('li').find('.subField').eq(0).show('slow');        
        });
         $(document).on("click",".buttonHide",function(e) {
            debugger
             $(this).addClass('buttonShow');
             $(this).removeClass('buttonHide');
             $(this).closest('li').find('.subField').eq(0).hide('slow');
        });
    });

Upvotes: 0

Ankur
Ankur

Reputation: 791

You can also try merging the click handlers

$(document).ready(function () {
    $('.subField').hide();
    //use event delegation since classes are changed dynamically
    $('#branches').on('click', '.buttonShow, .buttonHide', function () {
        $(this).hasClass('buttonShow') ? $(this).siblings('.subField').show('slow') : $(this).siblings('.subField').hide('slow');

        $(this).toggleClass('buttonHide buttonShow');

    });
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(document).ready(function () {
    $('.subField').hide();
    //use event delegation since classes are changed dynamically
    $('#branches').on('click', '.buttonShow', function () {
        //remove the show class and assign hidden
        $(this).toggleClass('buttonHide buttonShow');
        //the subfield is a child of the parent not the next sibling
        $(this).siblings('.subField').show('slow');
    });
    $('#branches').on('click', '.buttonHide', function () {
        $(this).toggleClass('buttonHide buttonShow');
        $(this).siblings('.subField').hide('slow');

    });
});

Demo: Fiddle

Upvotes: 1

Sudharsan S
Sudharsan S

Reputation: 15393

Try 

$(document).ready(function(){
    $('.subField').hide();

    $('.browseFields').on("click" , ".buttonShow" , function() {
        $(this).removeClass('buttonShow').addClass("buttonHide");
        $(this).parent().find('.subField').show('slow');
    });
    $('.browseFields').on("click" , ".buttonHide" , function() {
        $(this).removeClass('buttonHide').addClass("buttonShow");
        $(this).parent().find('.subField').hide('slow');
    });
});

Upvotes: 1

Related Questions