문제

I have a set of div's, What I want to do is when I click the read more button It shows the div "myContent" and hides the button for that particular container not all the divs with the same class name. and when I click the close button it hides the div (and because the button is there it should technically hide the button as well) and show the read more button again.

Whats happening right now is either all are showing or none are showing. I am a newbie (using Jquery) Any help most appreciated.

The HTML

<!-- -->
<div class="member-content">
<div class="member-box">
    <div class="photo">
        <img src="" alt="" />
    </div>
    <div class="contact-details">
        <h3>Mike</h3>
        <span class="role">Member</span><br>
        <span class="telephone">07595 8674523</span><br>

    <a href="#" class="read-more">Read More</a>

    </div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->


<div class="te contentDiv">
 <div class="myContent" style="display:none">
     <p>This Text is hidden</p>
    <a id="close_btn" href="#" class="close-more">Close</a>
 </div>    
</div>
<!-- -->

<!-- -->
<div class="member-content">
<div class="member-box">
    <div class="photo">
        <img src="" alt="" />
    </div>
    <div class="contact-details">
        <h3>Mike</h3>
        <span class="role">Member</span><br>
        <span class="telephone">07595 8674523</span><br>

    <a href="#" class="read-more">Read More</a>

    </div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->


<div class="te contentDiv">
 <div class="myContent" style="display:none">
     <p>This Text is hidden</p>
    <a id="close_btn" href="#" class="close-more">Close</a>
 </div>    
</div>
<!-- -->

<!-- -->
<div class="member-content">
<div class="member-box">
    <div class="photo">
        <img src="" alt="" />
    </div>
    <div class="contact-details">
        <h3>Mike</h3>
        <span class="role">Member</span><br>
        <span class="telephone">07595 8674523</span><br>

    <a href="#" class="read-more">Read More</a>

    </div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->


<div class="te contentDiv">
 <div class="myContent" style="display:none">
     <p>This Text is hidden</p>
    <a id="close_btn" href="#" class="close-more">Close</a>
 </div>    
</div>
<!-- --> 

Thanks!

도움이 되었습니까?

해결책

You can try this, Based on my understanding.

$('.read-more').click(function () {
    $(this).closest('.member-content').next('.contentDiv').find('.myContent').show();
    $(this).hide();
});

$('.close-more').click(function () {
    $(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
    $(this).closest('.myContent').hide();
});

DEMO

다른 팁

If I understand right here is what you are looking for :)

$('.read-more').click(function () {
    $(this).closest('.member-content').next('.contentDiv').find('.myContent').fadeIn();
    $(this).hide();
});

$('.close-more').click(function () {
    $(this).closest('.contentDiv').prev('.member-content').find('.read-more').fadeIn();
    $(this).closest('.myContent').hide();    
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top