CODEWITHSUNDEEP
javascriptjquery
Yayaya
Yayaya

Reputation:

If a <li> is clicked, hide the inner div

My DOM looks like this:

<li id="li1">
         <div class="c1"></div>
</li>
<li id="li2">
         <div class="c1"></div>
</li>

Using jQuery, if the first <li> is clicked, I want the inner <div></div> to be hidden.

Upvotes: 1

Views: 387

Answers (4)

John Boker
John Boker

Reputation: 83699

this might work for you:

note: make sure you include the jquery.js, i was lazy and didnt put it in here.

<html>
<head>
<script type="text/javascript" language="javascript">
$(document).ready(function(){

    $(".clickableLI").click(function(){
        $(this).find("div").hide();    
    });

});
</script>

</head>
<body>
    <ul>
        <li class="clickableLI">
             <div class="c1"></div>
        </li>
        <li class="clickableLI">
             <div class="c1"></div>
        </li>
    <ul>

</body>
</html>

Upvotes: 1

Cato Johnston
Cato Johnston

Reputation: 45659

Having two identical IDs is invalid xHTML

Not sure about the exact jQuery syntax

but in sudo code would be something like:

li1 addEvent('click')
{

get child of li1, filter by class c1
set style on child(display, none)
}

Upvotes: 0

Samantha Branham
Samantha Branham

Reputation: 7441

$("li:first").click(function() {
    $(this).children("div").hide();
});

Upvotes: 8

patricksweeney
patricksweeney

Reputation: 4022

You will run into problems when ID'ing 2 list items as the same ID. If you want the same CSS to apply to both, use classes instead.

Upvotes: 2

Related Questions