jQuery targeting this element

Question

I'm toggling the display of article content with a jQuery slide effect. But when the article is open, selecting close with toggle closed all articles that may be open if more than one article happens to have been toggled open. How do I target only the current article here..

<script>
jQuery(document).ready(function(){
    jQuery( ".content" ).hide();
    jQuery( ".entry-footer" ).hide();

    jQuery( ".more" ).click(function() {
        jQuery(this).parent().next('.content').show("blind",{direction:"vertical"},1000);
        jQuery(this).parent().next('.entry-footer').show("fast");
        jQuery(this).hide();
    });
    jQuery( ".close" ).click(function() {
        jQuery( ".content" ).hide("blind",{direction:"vertical"},1000);
        jQuery( ".more" ).show();
    });
});

</script>

<span class="excerpt">
    <?php
        $excerpt = get_the_content();
        $excerpt = strip_tags($excerpt);
        echo substr($excerpt, 0, 320);
    ?>
    <span class="more">[more]</span>
</span>
<span class="content">
    <?php
        $content = get_the_content();
        $content = strip_tags($content);
        echo substr($content, 321);
    ?>
    <span class="close">[close]</span>
</span>

Answer 1

<script>
jQuery(document).ready(function(){
    jQuery( ".content" ).hide();
    jQuery( ".entry-footer" ).hide();

    jQuery( ".more" ).click(function() {
        jQuery(this).parent().next('.content').show("blind",{direction:"vertical"},1000);
        jQuery(this).parent().next('.entry-footer').show("fast");
        jQuery(this).hide();
    });
    jQuery( ".close" ).click(function() {
        jQuery(this).parent().hide("blind",{direction:"vertical"},1000);
        jQuery( ".more" ).show();
    });
});

</script>

Because the .close span is the child of the .content span, use $(this).parent() to manipulate the content.

Answer 2

Try adding a unique Identifier to each article, such as an ID or a class. For example:

<span class="excerpt" ID='1'>
    <?php
        $excerpt = get_the_content();
        $excerpt = strip_tags($excerpt);
        echo substr($excerpt, 0, 320);
    ?>
    <span class="more">[more]</span>
</span>
<span class="content" ID='2'>
    <?php
        $content = get_the_content();
        $content = strip_tags($content);
        echo substr($content, 321);
    ?>
    <span class="close">[close]</span>
</span>

For the Jquery just do:

jQuery( ".close" ).click(function() {
    jQuery(this).parent().hide();
    jQuery( ".more" ).(this).parent().show();
});

Also, you don't need to sling jquery throughout your code. If you do this:

<script>
jQuery(document).ready(function($){
    $( ".content" ).hide();
    $( ".entry-footer" ).hide();

    $( ".more" ).click(function() {
        $(this).parent().next('.content').show("blind",{direction:"vertical"},1000);
        $(this).parent().next('.entry-footer').show("fast");
        $(this).hide();
    });
    $( ".close" ).click(function() {
        $( ".content" ).hide("blind",{direction:"vertical"},1000);
        $( ".more" ).show();
    });
});

</script>

Note the:

jQuery(document).ready(function($){

This allows you to forgo having to type jQuery for every thing you do within the .ready(function() {

Apparently my answer was highjacked by @James L.

Answer 3

Add the parent element for the grouping

        <div class="div_expert">
    <span class="excerpt">
    ...
        <span class="more">[more]</span>
    </span>
    <span class="content">
    ...
        <span class="close">[close]</span>
    </span>
    </div>

    $.(document).ready(function(){

       $( ".content" ).hide();
       $( ".entry-footer" ).hide();

       $('.more').on('click',  function(){

         var parent = $(this).parents('.div_expert');
         $(this).hide();
         $(parent).children('.content').show();

      });

      $('.close').on('click',  function(){

          var parent = $(this).parents('.div_expert');
          $(parent).children('.content').hide();
          $(parent).children('.more').show();
       });

   })