Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Jquery Track Toggling

    Hi,

    Im very new to jquery. I have a "contact" button which toggles a box open and closed.

    Im trying to do it so when you click on "contact" the contact text will change to "close". Then when you click on "close" it will change back to "contact".

    Here is a link to the site:
    http://identityconsulting.co.uk/test10.html#

    Below is my full site code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <link rel="stylesheet" type="text/css" media="print" href="print.css" /> 
    <title>Simple Toggle with CSS &amp; jQuery by Soh Tanaka</title> 
    <style type="text/css"> 
    html {
    	overflow-Y: scroll;
    }
    body {
    	font: 10px normal Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    	line-height: 1.7em;
    }
    *, * focus {
    	outline: none;
    	margin: 0;
    	padding: 0;
    }
     
    .container {
    	width: 500px;
    	margin: 0 auto;
    }
    h1 {
    	font: 4em normal Georgia, 'Times New Roman', Times, serif;
    	text-align:center;
    	padding: 20px 0;
    	color: #aaa;
    }
    h1 span { color: #666; }
    h1 small{
    	font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
    	text-transform:uppercase;
    	letter-spacing: 1.5em;
    	display: block;
    	color: #666;
    }
    h2.trigger {
    	padding: 0 0 0 50px;
    	margin: 0 0 5px 0;
    	background: url(h2_trigger_a.gif) no-repeat;
    	height: 46px;
    	line-height: 46px;
    	width: 450px;
    	font-size: 2em;
    	font-weight: normal;
    	float: left;
    }
    h2.trigger a {
    	color: #fff;
    	text-decoration: none;
    	display: block;
    }
    h2.trigger a:hover {
    	color: #ccc;
    }
    h2.active {background-position: left bottom;}
    .toggle_container {
    	margin: 0 0 5px;
    	padding: 0;
    	border-top: 1px solid #d6d6d6;
    	background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
    	overflow: hidden;
    	font-size: 1.2em;
    	width: 500px;
    	clear: both;
    }
    .toggle_container .block {
    	padding: 20px;
    	background: url(toggle_block_btm.gif) no-repeat left bottom;
    }
    .toggle_container .block p {
    	padding: 5px 0;
    	margin: 5px 0;
    }
    .toggle_container h3 {
    	font: 2.5em normal Georgia, "Times New Roman", Times, serif;
    	margin: 0 0 10px;
    	padding: 0 0 5px 0;
    	border-bottom: 1px dashed #ccc;
    }
    .toggle_container img {
    	float: left;
    	margin: 10px 15px 15px 0;
    	padding: 5px;
    	background: #ddd;
    	border: 1px solid #ccc;
    }
    
    .blackcontainer {
    	background: #000000;
    	padding-top: 4px;
    	width: 100%;
    }
    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){
    	
    	$(".toggle_container").hide();
     
    	$("h2.trigger").toggle(function(){
    		$(this).addClass("active"); 
    		}, function () {
    		$(this).removeClass("active");
    	});
    	
    	$("h2.trigger").click(function(){
    		$(this).next(".toggle_container").slideToggle("slow,");
    	});
     
     
     
     
    	$("h2.trigger2").toggle(function(){
    		$(".toggle_container").slideDown(); 
    		$(this).next(".toggle_container");
    		}, function () {
    		$(".toggle_container").slideUp();
    		$(this).next(".toggle_container");
    	});
    
    	$("h2.trigger3").click(function(){
                    $(".toggle_container").slideUp();
            });
     
     
     
    });
    </script> 
    </head> 
     
    <body> 
    
    <div class="blackcontainer"> 
    	<div class="container"> 
     	<div class="toggle_container"> 
    		<div class="block"> 
    			<h3>Need a Logo?</h3> 
    			<img src="thumbnail.gif" alt="" /> 
    			<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p> 
    			
    			<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
    
    
    
    </div> 
    	</div>
    	</div> 
    </div> 	
    
    	
    
    	<p style="text-align: center; font-size: 1.1em;"><a href="http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/">Tutorial</a> by <strong>Soh Tanaka</strong>. Check out his <a href="http://www.sohtanaka.com/web-design-blog/">Web Design Blog</a> for more tutorials!</p> 
     <h2 class="trigger2"><a href="#">Contact</a></h2> 
    
    	
    </body> 
    
    
    </html>
    I feel like im in over my head. Could someone offer some help please?
    Last edited by spadez; 03-18-2010 at 02:09 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    	$("h2.trigger2").toggle(
            function(){
    		$(".toggle_container").slideDown();
    		$(this).next(".toggle_container");
            this.getElementsByTagName('A')[0].innerHTML='Close';
    		},
            function () {
    		$(".toggle_container").slideUp();
    		$(this).next(".toggle_container");
            this.getElementsByTagName('A')[0].innerHTML='Contact';
    	});
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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