www.webdeveloper.com
Results 1 to 5 of 5

Thread: jQuery show/hide link div

  1. #1
    Join Date
    Aug 2006
    Posts
    49

    jQuery show/hide link div

    I have multiple divs called article which have a show/hide link to
    toggle a div inside called articleBody. Problem is when I click the
    link all divs show/hide.

    The html structure is below:

    <div class="article">
    <p class="show"><a href="#">Hide [-]</a></p>
    <div class="articleBody"><!-- Stuff i need to hide on click</div>
    </div>

    Any idea how I can toggle the text to say show/hide as well as just
    closing that one instance of div article rather than every instance on
    the page?

    Thanks

  2. #2
    Join Date
    Mar 2007
    Location
    USA
    Posts
    449
    Sounds like you might need to need to make your selectors more specific. Maybe this > child would work for you to not have all the divs selected.

    I was able to get success by targeting the link clicked on like this:
    Code:
    	$(function (){
    		$('.article a').click(function(){ 
    			if($(this).text()=='Hide [-]'){
    				$(this).text('Show [+]');
    				$(this).parent().next().hide();
    			} else {
    				$(this).text('Hide [-]');
    				$(this).parent().next().show();
    			}
    			return false;
    		});
    	});
    Code:
        <div class="article">
            <p class="show"><a href="#">Hide [-]</a></p>
            <div class="articleBody">test</div>
        </div> 
        <div class="article">
            <p class="show"><a href="#">Hide [-]</a></p>
            <div class="articleBody">test</div>
        </div> 
        <div class="article">
            <p class="show"><a href="#">Hide [-]</a></p>
            <div class="articleBody">test</div>
        </div> 
        <div class="article">
            <p class="show"><a href="#">Hide [-]</a></p>
            <div class="articleBody">test</div>
        </div> 
        <div class="article">
            <p class="show"><a href="#">Hide [-]</a></p>
            <div class="articleBody">test</div>
        </div> 
        <div class="article">
            <p class="show"><a href="#">Hide [-]</a></p>
            <div class="articleBody">test</div>
        </div>

  3. #3
    Join Date
    Aug 2006
    Posts
    49
    Thanks for the help

    The example for some reason was on click just hiding the h2 element. I modified it to this:


    $('.article p.show a').click(function(){
    if($(this).text()=='Hide [-]'){
    $(this).text('Show [+]');
    $(this).parent().next().next().next().hide();
    } else {
    $(this).text('Hide [-]');
    $(this).parent().next().next().next().show();
    }
    return false;
    });
    Not very elegant, but seems to work. Anyone know a way of making this a lot neater?

    Thanks again
    Last edited by Disfunctional; 04-13-2009 at 12:01 PM. Reason: spelling error

  4. #4
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    You could simplify it by adding a "Show [+]" link in the markup.

    Code:
    <div class="article">
    	<p class="show"><a href="#">Show [+]</a></p>
    	<p class="hide"><a href="#">Hide [-]</a></p>
    	<div class="articleBody">
    		<p>Hello, World!</p>
    	</div>
    </div>
    
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function(){
    
    	$("div.article").each(function(){
    
    		var thisArticle = this;
    
    		// Initially, hide the "Show" link
    		$("p.show", thisArticle).hide();
    
    		// The show and hide links both toggle themselves and the article body
    		$("p.show a, p.hide a", thisArticle).click(function(){
    			$("p.show, p.hide, div.articleBody", thisArticle).toggle();
    			return false;
    		});
    
    	});
    
    });
    
    </script>
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  5. #5
    Join Date
    Oct 2011
    Posts
    1
    In this Example :


    <div class="article">
    <p class="show"><a href="#">Show [+]</a></p>
    <p class="hide"><a href="#">Hide [-]</a></p>
    <div class="articleBody">
    <p>Hello, World!</p>
    </div>
    </div>

    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){

    $("div.article").each(function(){

    var thisArticle = this;

    // Initially, hide the "Show" link
    $("p.show", thisArticle).hide();

    // The show and hide links both toggle themselves and the article body
    $("p.show a, p.hide a", thisArticle).click(function(){
    $("p.show, p.hide, div.articleBody", thisArticle).toggle();
    return false;
    });

    });

    });

    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles