Multiple Divs Show/Hide One at a time

Question

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!

Answer 1

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

Answer 2

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