hide show divar

[sanda]

Tjenare på er!

Letar efter ett (tror det är JS) som kan visa och dölja divar.

Jag har att tex när man går in på sidan så är första länken/diven öppen medans dom andra stängda men när man klickar på en av de andra länkarna så ska den, i fråga, öppnas och den föregåede stängas.

I hans sidebar här finns ett sådant om ni inte hängde med

http://www.marcuswestberg.se

[tumba25]

Sätt style="display: none;" för dom divvar som inte ska visas vid start

Kod: Markera allt

<script type="text/javascript">
function sel_switch(ids)
{
	div1 = document.getElementById("div1");
	div1.style.display = "none";
	div2 = document.getElementById("div2");
	div2.style.display = "none";
	div3 = document.getElementById("div3");
	div3.style.display = "none";
	div4 = document.getElementById("div4");
	div4.style.display = "none";
	switch(ids)
	{
		case "1":
			div1.style.display = "block";
		break;
		case "2":
			div2.style.display = "block";
		break;
		case "3":
			div3.style.display = "block";
		break;
		case "4":
			div4.style.display = "block";
		break;
	}
}
</script>

Precis före </head> och sen ett

Kod: Markera allt

 onclick="sel_switch("X");"

I rutan man ska klicka i. X är id'n för divven som ska visas.

Du måste anpassa javaskript-snutten så den passar namnen på dina divvar.

[Kail]

Om du menar menyn kan du använda valfritt JS framework: jQuery, Moo Tools, script.aculo.us eller Prototype JS.

[sanda]

Nja det är divar som visar senate inlägg, kommentarer o.s.v. Kom över detta JS som funkar riktigt bra, dock, så skulle jag vilja att den "länk" som är aktiv vid tillfället ska på class="current" så det syns viliken av divarna som syns. skickar med koden som jag grävt fram

Kod: Markera allt

<div id="sidebar">

	<div id="recenttopic">
    
		<a class="current" href="javascript:switchid('newrecent');">Nyaste</a>
        
		<a href="javascript:switchid('newcomments');">Kommentarer</a>
        
	</div>

	<div class="recentsidebar">

		<div id='newrecent' style="display:block;">
			
         	<ol>
  			<?php
   			$lastposts = get_posts('numberposts=10');
   			foreach($lastposts as $post) :
    		setup_postdata($post);
   			?>
   				
                <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
   			
			<?php endforeach; ?>
            
		</ol>
        
	</div>

	<div id='newcomments' style="display:none;">
		
		<p>Här visas kommentarer</p>
	
	</div>

</div>

</div>

Och JS filen:

Kod: Markera allt

//here you place the ids of every element you want.
var ids=new Array('newrecent','newcomments');

function switchid(id){	
	hideallids();
	showdiv(id);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i]);
	}		  
}

function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}

[sanda]

Någon som har en idé?