Show/Hide divs with same class names independently

JavaScript
1

Hi,

I can’t seem to find a way to do this anywhere so I said I’d ask here. I’ve got a PHP while loop spitting out an article title and it’s content from a database and I have links to show or hide the content of the article under each title.

I tried simply putting using jquery hide/show on the divs, but as you’d expect this will show and hide every div at the same time. I want to show and hide the content of the article selected as you’d expect.

Any help would be appreciated, thanks!

2

You just need to add a context to the selection.

Show us the HTML code, and the jQuery script that you were using.

3

The method you would use depending on the position of the hide/show link is either of the following.

jQuery.prev() - Used when the element you want to hide sits before the hide/show link
jQuery.next() - Used when the element you want to hide sits after the hide/show link

Example

$(function() {
    $('.button').click(function() {
        // jQuery.prev()
        $(this).prev('.hide-show').toggle();
        
        // jQuery.next()
        $(this).next('.hide-show').toggle();
        
        return false;
    });
});
4

Thanks for the replies guys.

At the moment I’m using:

$('.seearticle').click(function() {
  $('.article').slideDown('fast', function() {
  });
});

$('.seearticle').click(function() {
  $('.seearticle').hide('fast', function() {
  });
});

$('.seenotes').click(function() {
  $('.hidearticle').show('fast', function() {
  });
});


$('.hidearticle').click(function() {
  $('.article').slideUp('fast', function() {
  });
});
$('.hidearticle').click(function() {
  $('.hidearticle').hide('fast', function() {
  });
});

$('.hidearticle').click(function() {
  $('.seearticle').show('fast', function() {
  });
});

I’m sure this is a fairly inefficient way to achieve what I want, I should probably be using if statements instead.

Here’s the HTML output from the script:



<div class='seenotes'>View Notes</div>
<div class='hidenotes'>Hide Notes</div>

<div class='article'>
Article Content
</div>
5

Give this a try

$(function() {
    $('.toggleNotes').click(function() {
        $nextArticle = $(this).next('.article');
        $nextArticle.is(':visible') ? $nextArticle.slideUp() : $nextArticle.slideDown();
        
        return false;
    });
});

<a href="#" class="toggleNotes">Hide/Show Notes</a><br />
<div class="article">
    Article Content
</div>

If your wondering why i changed the div to an anchor its because its better markup. Took me a while to fully understand the HTML markup but it does helps heaps when you do finally understand it.

6

Thanks for the help, yeah I don’t know why I was using a div there at all.

Nothing is happening when I click the link. I have the .article div set to display none in my CSS, do I need to do that at all?

Thanks

7

Sorry forgot i added the line break in there, try this.

$(function() {
    $('.toggleNotes').click(function() {
        $nextArticle = $(this).next().next('.article');
        
        if ($nextArticle.length) {
            $nextArticle.is(':visible') ? $nextArticle.slideUp() : $nextArticle.slideDown();
        }
       
        return false;
    });
});
8

You could get away with only the following HTML


<div class="toggle">View Article</div>
<div class="article">
Article Content
</div>

Why? The article class you can hide immediately when the page loads. It’s a bad idea to use CSS to hide content, otherwise that content is then invisible when the visitor has no scripting. Instead, where scripting makes content available, it’s better to hide it with scripting too.


$(function () {
    $('.article').hide();
    ...
});

Then you can assign a click event to each .toggle element.

When the div has finished being toggled, the state of the toggler is updated between View and Hide for the next time.


$(function () {
    $('.article').hide();

    $('.toggle').click(function() {
        var toggle = $(this);
        toggle.next().slideToggle('fast', function () {
            var state = this.style.display === 'none' ? 'View' : 'Hide';
            toggle.html(state + toggle.substr(4));
        });
    });
});
9

Thanks SgtLegend and Paul, it’s working great for me now. Really appreciate it.

10

No problem