CODEWITHSUNDEEP
htmlshow-hidechildrenjquery
JeremyS
JeremyS

Reputation: 329

How to select and toggle hide on children divs of selected element in Jquery

I'm quite new to Jquery and have a problem when I try to select child divs in my program. The point is to have a button that fires a jquery function. This function is meant to get all children divs from where the button is and hide them. Here is my jquery code:

$(".button").click(function () {
    $(this).children('div').fadeToggle("fast", function () {
    });
});

My html is quite simple. A div within a div and within the second div are two more divs.

<div class="clients>
    <input type="button" class="button" id="button" value="Hide Sites" autopostback="false"/>
    <div class="websites>
        <div class="urls"></div>
        <div class="data"></div>
    </div>
</div>

This is not working though. I've tried using jquery.next and siblings but couldn't get these to work either. Jquery.closest looked upwards and found the container div (clients) but this wasn't what I needed either. Guys help? Thanks

Upvotes: 0

Views: 4185

Answers (3)

JeremyS
JeremyS

Reputation: 329

Solved it by using jquery.siblings:

$(".button").click(function () {
    $(this).siblings('div').fadeToggle("fast", function () {
    });
});

I had previously tried siblings but I guess I had an error because now its working. Thank you all!

Upvotes: 0

Adil
Adil

Reputation: 148150

You have broken html, closing quote missing here class="clients and here class="websites and you have to use next() instead of children()

Live Demo

<div class="clients">
    <input type="button" class="button" id="button" value="Hide Sites" autopostback="false"/>
    <div class="websites">
        <div class="urls">1</div>
        <div class="data">2</div>
    </div>
</div>​

$(".button").click(function () {
    $(this).next('div').fadeToggle("fast", function () {
    });
});

Upvotes: 3

Andrei Cristian Prodan
Andrei Cristian Prodan

Reputation: 1122

try this format

$('.clients').on('click', $('.button'), function(){

});

Upvotes: 1

Related Questions