[Løst] Hjelp til jquery toggle/slider

[Elliphant]

Problemstilling

Skal ha to to anchorlenker plassert inni en egen div, og igjen i en uordnet liste, som vist nedenfor i kodeutsnitt 1. Her skal grid2-1-1 være aktiv ved sidelastning. Disse to lenkene skal toggle mellom to forskjellige div som er innenfor en annen div med id grid2-2. Innenfor grid2-2 er det to diver, grid2-2-1 og grid2-2-2. Se kodeutsnitt 2 for dette.

 

Lenkene i kodeutsnitt 1 skal veksle mellom disse to boksene (grid2-2-1 og grid2-2-2). Og dette har jeg forsåvidt fått til ved å benytte scriptet vist i kodeutsnitt nummer tre. Men poenget er at jeg ønsker en mer glatt veksling mellom disse to divene, og samtidig skjule en tredje div skjules med id grid3 når grid2-2-2 aktiveres. Da grid2-2-2 er større en grid2-2-1.

 

Om mulig skal også parent LI til anchortaggen skifte ID når achorlenke innenfor klikkes.

 

Er det noen som kan hjelpe meg med dette? Sitter realt fast. Send gjerne en melding for å se en demo av slik det fungerer nå.

 

Kodeutsnitt 1

<div id="grid2-1">
<!--- Togglemenu --->
 <ul class="toggle">
  <li class="current" id="grid2-1-1"><a href="#grid2-2-1"><span>Allerede bruker?</span></a></li>
  <li id="grid2-1-2"><a href="#grid2-2-2"><span>Registrer deg nå</span></a></li>
 </ul>
<!--- /Togglemenu --->
</div>

 

Kodeutsnitt 2

<div id="grid2-2">
<!--- G2-2-1 --->
 <div id="grid2-2-1" class="code">
  Innlogging
 </div>
<!--- /G2-2-1 --->

<!--- G2-2-2 --->
 <div id="grid2-2-2" class="code">
  Registrering
 </div>
<!--- /G2-2-1 --->
</div>

 

Kodeutsnitt 3

$(function(){
 var toggles = $('.toggle a'),
  codes = $('.code');

 toggles.on("click", function(event){
event.preventDefault();
var $this = $(this);

if (!$this.hasClass("active")) {
  toggles.removeClass("active");
  $this.addClass("active");
  codes.hide().filter(this.hash).show();
}
 });
 toggles.first().click().slow();
});

 

Håper noen har peiling og mulighet til og hjelpe.

Endret 16. august 2012 av johneliassen

[Elliphant]

Ingenting?

[Elliphant]

$(function() {
   $('.toggle a').on("click", function(e) {
    e.preventDefault();
    var elm = $(this);
    if (elm.not(".active")) {
	    elm.closest('li').addClass("active").siblings().removeClass("active");
	    if (!$(elm.attr('href')).is(':visible')) {
		    $('.code').filter(':visible').fadeOut(1000, function() {
			    $(elm.attr('href')).fadeIn(1000);
		    });
	    }
    }
   });
});

 

Løste problemet.