SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member Asker's Avatar
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy jQuery toggle problem

    Code JavaScript:
    <html>
    <head>
     
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		$(".preview_link").click(function(){
    		  $(this).prev(".content_box_information") .slideToggle("slow");
    			$(this).toggleClass("active"); return false;
    		});
    	});
    </script>
     
     
    <style type="text/css">
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}:focus{outline:0;}body{background:#111;line-height:1;}ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}a{color:black;text-decoration:none;}a:hover{text-decoration:underline;}#wrap{width:760px;margin:0 auto;padding-top:160px;}.content_box{background:#777;border:1px solid #999;display:inline;float:left;height:156px;margin:0 20px 18px 0;padding:16px 22px 30px;_padding-bottom:9px;position:relative;width:264px;}.content_box_images{width:258px;height:138px;border:1px solid #999;}.content_box_information{display:none;font-size:12px;line-height:17px;background:#CCC;height:86px;width:189px;color:#000;overflow:hidden;padding:12px 0 0 15px;position:absolute;top:40px;left:50px;}h2 a{color:#ccc;float:left;}.content_box-info{float:right;margin:10px 4px 0 0;}table.popup-contents th{text-align:left;width:60px;}table.popup-contents td{text-align:left;}
    </style>
     
    </head>
     
    <body>
     
    	<div id="wrap">
     
    		<div class="content_box">
     
    				<a href="#"><img class="content_box_images" src ="http://imgur.com/ZYhLd.jpg"></a>			
     
    						<div class="content_box_information">	
     
    											<table class="popup-contents">
     
    												<tr>
    												Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    												</tr>
     
    											</table>								
    						</div>
     
    						<h2><a href="#" >Title</a></h2>
    						<a class="preview_link" href="#" rel="nofollow">Preview</a>						
     
    		</div>
     
     
    		<div class="content_box">
     
    							<a href="#"><img class="content_box_images" src ="http://imgur.com/ZYhLd.jpg"></a>			
     
    							<div class="content_box_information">	
     
    											<table class="popup-contents">
     
    												<tr>
    												Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    												</tr>
     
    											</table>								
    							</div>
     
    						<a class="preview_link" href="#" rel="nofollow">Preview</a>		
    						<h2><a href="#" >Title</a></h2>						
     
    		</div>
     
    	</div>
     
     
     
    </body>
    </html>

    the problem is the toogleclass is working properly if I did not add any elemnts before the toggleclass link.but when I add an element before it the toggle class is not working.Please someone help me.I want the toggle link just after the h2 title.Please help me.
    Last edited by spikeZ; Apr 19, 2010 at 03:38. Reason: offering money is not required

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    When you go from the first preview link to its previous element, that doesn't get you to where you need to go.

    Replace the slideToggle line with this one here:

    Code javascript:
    $(this).parent().find(".content_box_information").slideToggle("slow");
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member Asker's Avatar
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks bro,thousand times thanks...
    mail me your papal id and will give you $10


Tags for this Thread

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
  •