CODEWITHSUNDEEP
jqueryfor-loopeach
Petey Pete
Petey Pete

Reputation: 55

JQuery Loop for ID's using the iteration number

I have a very basic question but I couldn't find the answer anywhere maybe because I don't know what to search for exactly.

I inserted several read more buttons on my page. By clicking one, the read more text appears, the read more button disappears and a read less button appears.

To do this, this JQuery code works fine for me:

$('#readmore1').click(function(){
    $("#readmoretext1").toggle();
    $("#readmore1").hide();
    $("#readless1").show();
});

$('#readless1').click(function(){
    $("#readmoretext1").toggle();
    $("#readmore1").show();
    $("#readless1").hide();
});

$('#readmore2').click(function(){
    $("#readmoretext2").toggle();
    $("#readmore2").hide();
    $("#readless2").show();
});

$('#readless2').click(function(){
    $("#readmoretext2").toggle();
    $("#readmore2").show();
    $("#readless2").hide();
});

Since I do have some more buttons I wanted to do a loop so I don't have to copy the code everytime. The problem is that I (as far as I can see it) cannot use classes and the .each() function because every read more button has its own unique text. Is there any form of "for-loop" I could use to do the trick?

Thanks in advance! Cheers Peter

Upvotes: 1

Views: 102

Answers (3)

David Hedlund
David Hedlund

Reputation: 129832

While a for loop or jQuery's each could certainly be used to this end, classes appears to be your best option here. The exact implementation details would depend on what you know about your DOM, however.

For instance, if you are able to see to it that there will always be a container that encapsulates all the targeted elements, but none of the elements for another toggle, you may search for classes only within that container:

$('.toggle-read').click(function(e) {
    e.preventDefault();
    var container = $(this).closest('.read-container');
    container.find('.toggle-read, .read-more-text').toggle();
});

Fiddle

There may be other layouts for which other assumptions can be made, and you would have to traverse the DOM in another manner, but that is the general idea. If, however, no assumptions can be made about the DOM, you may have to fall back to data- attributes. Such a solution could look something like this:

$('.toggle-read').click(function(e) {
    e.preventDefault();

    $($(this).data('target')).toggle();
    $($(this).data('other-button')).show();
    $(this).hide();
});

Given the following markup:

<a href="#" id="readmore-1" class="toggle-read more" data-target="#moretext-1" data-other-button="#readless-1">Read more</a>
<a href="#" id="readless-1" class="toggle-read less" data-target="#moretext-1" data-other-button="#readmore-1">Read less</a>

Fiddle

Upvotes: 1

Deepu Sasidharan
Deepu Sasidharan

Reputation: 5309

Are you looking for this, 

$(".readmore").click(function(){
    $(this).siblings('p').slideDown();
});
$(".readless").click(function(){
    $(this).siblings('p').slideUp();
});

DEMO

Upvotes: 0

mrks
mrks

Reputation: 8343

I assume that readmoretext2 can be navigated to from readmore2. You should do that. E.g., if it is a child:

$('.readmore').click(function(){
    $(this).children('.readmoretext').toggle()
})

Upvotes: 1

Related Questions