JQuery Loop for ID's using the iteration number

Question

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

You should rather navigate by the DOM structure, than by specific ids. — C3roe
– C3roe, Commented Nov 16, 2015 at 13:51
You can certainly use classes. You should also easily be able to combine readmore and readless into a single toggle. The exact details of how to best achieve such a function depends on what your DOM looks like. data- attributes could always be used, but knowledge of the DOM may reveal more convenient paths. — David Hedlund
– David Hedlund, Commented Nov 16, 2015 at 13:55

David Hedlund · Accepted Answer · 2015-11-16 14:17:27Z

1

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

answered Nov 16, 2015 at 14:17

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Petey Pete Over a year ago

As there will be no mixtures of containers, your first solution works just like a charm! Thanks a lot!

mrks · Accepted Answer · 2015-11-16 13:51:52Z

1

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()
})

answered Nov 16, 2015 at 13:51

mrks

8,4532 gold badges37 silver badges67 bronze badges

Comments

Deepu Sasidharan · Accepted Answer · 2015-11-16 14:01:41Z

0

Are you looking for this,

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

DEMO

answered Nov 16, 2015 at 14:01

Deepu Sasidharan

5,32911 gold badges46 silver badges100 bronze badges

Collectives™ on Stack Overflow

JQuery Loop for ID's using the iteration number

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related