CODEWITHSUNDEEP
jqueryhtmlcss
user2300867
user2300867

Reputation: 603

displaying only next instance of a class when clicking on another

I'm displaying a div with text when I click on .read-more class. The problem I'm facing is that when I click .read-more all instances of .slide-box are being displayed instead of only the one just below the specific .read-more.

Here is my current code:

$( ".read-more" ).click(function() {
    $(this).css('display','none');
    $('div.slide-box').css('position','static');
    $('.accordion .txt-box').css('border','none');
    $('.accordion .txt-box p').css('margin','0');
});

I tried using :

 $.next('div.slide-box').css('position','static');

without success..

How can I only target only the next instance of div with class .slide-box ?

here is the markup:

<div class="txt-box">
<h2>txt</h2>
<h3>txt</h3>                                        
<p>txt txt.....<span class="read-more"> -Read More</span></p>
<a class="opener" href="#">plus</a>
</div>
<div class="slide-box">
<p>Itxt txt.....<span class="read-less"> -Less</span></p>                                    
</div>

I'm hoping to be able to keep the markup as it is since it is a wp site..

Upvotes: 0

Views: 45

Answers (2)

Nawed Khan
Nawed Khan

Reputation: 4401

You need to reference next of this. Try this: 

$(this).next('div.slide-box').css('position','static');

Based on the provided markup you can try this code:

$(this).closest('.txt-box').next('div.slide-box').css('position','static');

Here it is assumed that you will have a div with class 'txt-box' and a div with class 'slide-box' next to it for each instance.

Upvotes: 1

chris stevens
chris stevens

Reputation: 326

JQuery's .find() may help. http://api.jquery.com/find/

Below will actually return the first element on the page instead of the 'next' as pointed out in comments.

This returns an array of jquery elements: $('div.slide-box')

So this should work $('div.slide-box')[0].

Upvotes: 1

Related Questions