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 10 of 10
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    js help toggle function

    for the record , I'm completely lost with js scripts but nevertheless i continue to try to learn a little , I downloaded a script and installed it, all is working fine , but i need it to toggle between the tabs i have set up, where once one is opened the other closes....currently they all are locked open once clicked and do not autoclose . Here is the script , so any help would really be appreciated


    Code:
    <link rel="stylesheet" href="http://nitrografixx.com/Template3/css/style.css" type="text/css"/>
    <script type="text/javascript" src="http://nitrografixx.com/Template3/js/jquery-1.3.2.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    	$(".trigger").click(function(){
    		$(".panel").toggle("fast");
    		$(this).toggleClass("active");
    		return false;
    	});
    });
    
    $(document).ready(function(){
    	$(".trigger1").click(function(){
    		$(".panel1").toggle("fast");
    		$(this).toggleClass("active");
    		return false;
    	});
    });
    
    $(document).ready(function(){
    	$(".trigger2").click(function(){
    		$(".panel2").toggle("fast");
    		$(this).toggleClass("active");
    		return false;
    	});
    });
    </script>
    
    <div class="panel">
    	<h3>TAB01</h3>
    			<ul>
                            <li>TESTTESTTESTTEST</li>
    			</ul>
    <div style="clear:both;"></div>
    
    	<div class="columns">
    		<div class="colleft1">
    			<h3>TEST</h3>
    			<ul>
                            <li>Testingtestingtesting</li>
    			</ul>
    		</div>
    	
    		<div class="colright">
    			<h3>TEST1</h3>
    			<ul>
                            <li>Testingtestingtesting</li>
    			</ul>
    		</div>
    	</div>
    
    <div style="clear:both;"></div>
    </div>
    <a class="trigger" href="#">TAB01</a>
    
    
    
    
    
    <div class="panel1">
    	<h3>TAB02</h3>
    			<ul>
                            <li>TESTTESTTESTTEST</li>
    			</ul>
    <div style="clear:both;"></div>
    
    	<div class="columns">
    		<div class="colleft">
    			<h3>TEST</h3>
    			<ul>
                            <li>Testingtestingtesting</li>
    			</ul>
    		</div>
    	
    		<div class="colright">
    			<h3>TEST1</h3>
    			<ul>
                            <li>Testingtestingtesting</li>
    			</ul>
    		</div>
    	</div>
    
    <div style="clear:both;"></div>
    </div>
    <a class="trigger1" href="#">TAB02</a>
    
    
    
    
    
    <div class="panel2">
    	<h3>TAB03</h3>
    			<ul>
                            <li>TESTTESTTESTTEST</li>
    			</ul>
    <div style="clear:both;"></div>
    
    	<div class="columns">
    		<div class="colleft">
    			<h3>TEST</h3>
    			<ul>
                            <li>Testingtestingtesting</li>
    			</ul>
    		</div>
    	
    		<div class="colright">
    			<h3>TEST1</h3>
    			<ul>
                            <li>Testingtestingtesting</li>
    			</ul>
    		</div>
    	</div>
    
    <div style="clear:both;"></div>
    </div>
    <a class="trigger2" href="#">TAB03</a>

  • #2
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    here is a test site i have it installed on fixed to top left of site

    http://www30.myfantasyleague.com/2011/home/50782

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok, this has some problems, btu it's a start. replace all your functions with this code and rename .trigger to trigger0 and panel to panel0,

    ill help further later:

    Code:
    $(document).ready(function(){
    $("a[class^='trigger']").each(function(index, value) {
    
    $(this).bind("click",function(e){
    e.preventDefault();
    $("[class^='panel']").hide("fast");
    $("a[class^='trigger']").not('.trigger'+index).removeClass("active");
    
    $(".panel"+index).show("fast");
    $(this).addClass("active");
    		
    });
    });
    });

  • Users who have thanked DanInMa for this post:

    mshack (12-22-2011)

  • #4
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    got it installed
    http://www30.myfantasyleague.com/2011/home/50782

    just need to get them to close now , i'll wait for u to get some free time to help me out unless someone else can finish it up

    thanks

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    seems to be working well between each click at least thats a decent start

    oh also your getting this error on some kind of a interval:

    Node was not found
    http://www30.myfantasyleague.com/mfl_common.js
    Line 547

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    would it be possible to put the panels and anchors in a containing div?

    if you could do that, then you could probably do something like binding the fade of all elements in the container on mouseout or mouseleave

  • #7
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i really have no idea what to do , i'm lost to get it to function properly

    need the content panels to close after another is clicked or the same trigger is clicked again

  • #8
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    http://spyrestudios.com/how-to-creat...uery-and-css3/

    here is link to the original source code and demo file , the demo shows 1 trigger installed , i of course wanted multiple ones

  • #9
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    would it be possible to put the panels and anchors in a containing div?

    if you could do that, then you could probably do something like binding the fade of all elements in the container on mouseout or mouseleave


    i could put all the panel and trigger classes into one containing div

    if this won't work if anyone can point me out to another source that i can do something similar would be appreciated
    thanks
    Last edited by mshack; 12-22-2011 at 07:14 PM.

  • #10
    New Coder
    Join Date
    Sep 2010
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    if anyone can get this working email me at mike@nitrografixx.com i can pay via paypal to have this done

    thanks


  •  

    Posting Permissions

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