Just nu i M3-nätverket
Jump to content

Visible/not visible


java

Recommended Posts

Hej!

skulle vilja få hjälp med ett javascript som ska göra följande:

Jag har en bild med ett plustecken på och när man klickar på denna så ska ett textstycke expanderas och visas (detta textstycke ska vara dolt innan man klickar på plusset).

Det ska också finnas en bild på ett minustecken och när man klickar på denna så ska all text döljas. Klickar man på minustecknet utan att någon text finns på sidasn så ska inget hända.

 

Sedan vill jag använda mig av denna plus- och minusfunktion på flera textstycken på samma sida.

Det utrymme som texten tar när den visas ska inte synas innan texten expanderats, dvs inte en massa tomrader.

 

Är nybörjare både gällande javascript och html så jag behöver koden både för javascriptet och själva html-delen smile.gif Tack på förhand!

Link to comment
Share on other sites

Med jquery är det rätt så straight forward:

 

Min javascript har jag baserat på följande HTML-struktur

<div class="hidebox">
<h3><a href="mamma.html">Rubrik</a></h3>
<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros sem, vehicula nec, imperdiet vel, commodo ac, dolor.</p>
</div>
</div>

<div class="hidebox">
<h3><a href="mamma2.html">Rubfwf wefwe</a></h3>
<div>
	<p>Ut vitae arcu. Phasellus ut lectus. In hac habitasse platea dictumst. Vivamus iaculis adipiscing metus. </p>
</div>
</div>

<div class="hidebox">
<h3><a href="mamma4.html">rewrwefwe</a></h3>
<div>
	<p>Vestibulum eget elit. Maecenas scelerisque, nisl nec suscipit malesuada, massa sem ultrices mi, eu luctus lacus quam vitae sem.  </p>
</div>
</div>

 

Med denna css lägger jag in plus-minus-ikonerna.

a.plus, a.minus {padding-left:20px;background:transparent url('plus.gif') no-repeat 0 50%}
a.minus {background-image:url('minus.gif') !important;}

 

 

Och denna javascript (jquery kan hostas hos google för bra tillgänglighet och ur bra cachningssynpunkt)

 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
google.load("jquery", "1.4.2"); // hämta jquery från google
google.setOnLoadCallback(initialize); //kör funktionen initialize när sidan har laddats
function initialize()
{	
	$(".hidebox div").hide();
	$(".hidebox h3 a").addClass("plus")
		.click(function(e)
			{
			var l = $(this);
			l.parent().next("div").slideToggle(500, 
				function()
				{
				l.toggleClass("minus");
				});
			e.preventDefault();
			}
		);
}
 </script>

Link to comment
Share on other sites

Med lite ytterligare styling kan det se ut så här:

<!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>
 <title> boxar </title>
 <meta name="generator" content="editplus" />
 <meta name="author" content="" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <style type="text/css">
 body{font:normal normal 100%/1.5 'Trebuchet MS', Helvetica, sans-serif}
 p{font-size:12px}

.hidebox {width:230px; border:1px solid #777; background:#eee; padding:0 1em; margin-bottom:1em}
.hidebox h3{font-size:15px;}
.hidebox h3 a{color:#333;text-decoration:none;display:block;}
.hidebox h3 a:hover{color:#777}


a.plus, a.minus {padding-left:20px;background:transparent url('plus.gif') no-repeat 0 50%}
a.minus {background-image:url('minus.gif') !important;}
 </style>
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
google.load("jquery", "1.4.2");
google.setOnLoadCallback(initialize);
function initialize()
{	
	$(".hidebox div").hide();
	$(".hidebox h3 a").addClass("plus")
		.click(function(e)
			{
			var l = $(this);
			l.parent().next("div").slideToggle(500, 
				function()
				{
				l.toggleClass("minus");
				});
			e.preventDefault();
			}
		);
}
 </script>
</head>
<body>
<div class="hidebox">
<h3><a href="mamma.html">Rubrik</a></h3>
<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros sem, vehicula nec, imperdiet vel, commodo ac, dolor.</p>
</div>
</div>

<div class="hidebox">
<h3><a href="mamma2.html">Rubfwf wefwe</a></h3>
<div>
	<p>Ut vitae arcu. Phasellus ut lectus. In hac habitasse platea dictumst. Vivamus iaculis adipiscing metus. </p>
</div>
</div>

<div class="hidebox">
<h3><a href="mamma4.html">rewrwefwe</a></h3>
<div>
	<p>Vestibulum eget elit. Maecenas scelerisque, nisl nec suscipit malesuada, massa sem ultrices mi, eu luctus lacus quam vitae sem.  </p>
</div>
</div>


</body>
</html>

Link to comment
Share on other sites

Tackar så mycket, får det dock inte att fungera :(

 

Går det att göra detta utan jquery? Allt syns på sidan när den laddas, vill att textboxarna bara ska synas när man klickar på plus och att de försvinner när jag klickar på minusbilden.

Link to comment
Share on other sites

Det går att göra utan jquery - men det är mer kod och jag har inte lust att skriva det. Varför göra det sämre?

 

Så fungerar det jag postade. Har du en url till sidan så är det lättare att se vad som är fel.

Link to comment
Share on other sites

Allt syns på sidan när den laddas, vill att textboxarna bara ska synas när man klickar på plus och att de försvinner när jag klickar på minusbilden.

Testa att ändra rad 25:

google.setonloadCallback(initialize);

..till detta med rätt stora och små bokstäver så fick i alla fall jag det till att fungera:

google.setOnLoadCallback(initialize);

 

Edit: Nu funkar det inte att skriva rätt här för forumet har sönder stora och små bokstäver. Så Jonas exempel fungerade förmodligen utmärkt redan från början. Men utan mellanslag skall det vara enligt: "set On Load Callback"

 

Sedan är det bara att modda och fixa så att det ser ut precis som du vill.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...