SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide divs with same class names independently

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You just need to add a context to the selection.

    Show us the HTML code, and the jQuery script that you were using.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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
    Code JavaScript:
    $(function() {
        $('.button').click(function() {
            // jQuery.prev()
            $(this).prev('.hide-show').toggle();
     
            // jQuery.next()
            $(this).next('.hide-show').toggle();
     
            return false;
        });
    });

  4. #4
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies guys.

    At the moment I'm using:

    Code JavaScript:
    $('.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:

    HTML Code:
    <div class='seenotes'>View Notes</div>
    <div class='hidenotes'>Hide Notes</div>
    
    <div class='article'>
    Article Content
    </div>

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Give this a try

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

    HTML Code:
    <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. #6
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry forgot i added the line break in there, try this.

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

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You could get away with only the following HTML

    Code html4strict:
    <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.

    Code javascript:
    $(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.

    Code javascript:
    $(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));
            });
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks SgtLegend and Paul, it's working great for me now. Really appreciate it.

  10. #10
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •