CODEWITHSUNDEEP
javascriptjqueryhtmldom
Jay Godse
Jay Godse

Reputation: 15533

HTML: jQuery: DOM manipulation

I'm lazy. There! That's out of the way.

I have a list of items of indeterminate length which I would like to render in HTML. I want to show a part of each item and then have a "show more" link in each item which will show more of the item. Since the "show more" link implements the same functionality, I bound the same click handler function to the "show more link" which then shows the HTML span which contains the hidden text. My code looks like this:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
</head>
<body>
<p>List of stuff</p>
<ul>
    <li> One <a href="#" class="showmore_link">show more</a>  <span class="showmore" style="display:none"> More about One </span></li>
    <li> Tow <a href="#" class="showmore_link">show more</a>  <span class="showmore" style="display:none"> More about Two </span></li>
    <li> Three <a href="#" class="showmore_link">show more</a>  <span class="showmore" style="display:none"> More about Three </span></li>
</ul>
<script type="text/javascript">

     $(document).ready(function() {
        $(".showmore_link").click(show_more_toggle);
     });

     show_more_toggle=function(){
        $(".showmore").slideToggle();
     }

</script>
</body>
</html>

When I click the "show more" link, it shows all three spans of class "showmore". How can I adjust the "show_more_toggle" click handler so that it only opens up the span in the same list item?

CONSTRAINT: I cannot use "id" attributes on the spans or the list elements for other reasons.

Upvotes: 0

Views: 396

Answers (4)

Bizniztime
Bizniztime

Reputation: 1036

Use next() - it will get you span element.

Upvotes: 0

alexl
alexl

Reputation: 6851

another solution: 

$(document).ready(function() {
    $(".showmore_link").click(function() {
        $(this).parent().children(".showmore").slideToggle();
    });
});

http://jsfiddle.net/A7fM5/

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92983

$('a.showmore_link').click(function() {
    $(this).next().show();
});

Upvotes: 3

ipr101
ipr101

Reputation: 24236

Try - 

 show_more_toggle=function(){
    $(this).siblings(".showmore").slideToggle();
 }

Demo - http://jsfiddle.net/ipr101/9GB9u/

Upvotes: 1

Related Questions