hide en show meerdere div's

Status
Niet open voor verdere reacties.
L

looije

Gebruiker
Lid geworden
2 apr 2002
Berichten
203
Beste helpmijers,

Allereerst, mijn javascript kennis is niet zo top.
Meeste van mijn code haal ik van internet. Alleen nou loop ik tegen het volgenden aan.

Ik heb een pagina waar verschillende onclicks op staan.
Bij elke onclick zou er een div moeten openen en bij nog een keer klikken moet hij sluiten. Dat werkt oke.
Alleen als ik op een andere onclick klik dan zou hij direct de openstaande div moeten sluiten en de desbetreffende moeten openen.
Op zich werkt het, de nieuwe tekst van de div komt in beeld. Alleen de pagina word weer 693px. Deze zou op 100% moeten blijven.

Hoop dat ik het zo goed omschrijf. Heeft iemand een idee wat hier niet goed gaat en/of ik het anders aan zou moeten pakken?
Hieronder de javascript code. Als er meer code vereist is hoor ik het graag.

bvd, Patrick

Code: 
<script type="text/javascript">
function show_visibility(cid){	
	hide_visibility(cid);
	document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
	document.getElementById("container").style.Height=(document.getElementById("container").style.Height!="100%")? "100%" : "693px"
}

function hide_visibility(cid){
	var sel = document.getElementById('extra_info').getElementsByTagName('div');
	for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
	
}
</script>
 
Hallo Patrick,

Ik zou je graag willen helpen maar ik heb inderdaad iets meer code nodig.
Ten eerste lijkt het mij ook beter dat je gebruik gaat maken van Jquery
Als ik het zo lees kan het wel eens zijn dat je een accordeon bedoelt, zo iets: http://jqueryui.com/accordion/#collapsible
 
Laatst bewerkt:
Als ik het zo lees kan het wel eens zijn dat je een accordeon bedoelt
Klik om te vergroten...

Ongeveer wel. Hoeft niet glijdend te verlopen (is natuurlijk wel mooi)
de divs moeten allen onderaan verschijnen, dus niet tussen de links.

de code voor de links:
Code: 
					<td width="24" align="center" valign="top">•</td>
					<td width="260" style="font-size: 18px;">kalk- / schimmelnagels</td>
					<td class="pointer" OnClick="show_visibility('info_01')" style="cursor: pointer; color: #045B78; font-size: 18px;">meer informatie:</td>
visibility('info_01') loopt op tot visibility('info_11')

de code van de divs:
Code: 
				<div class="hidden" id="info_01" style="display: none;">				
					<p>
                                            Hier de tekst
					</p>				
				</div>
 
Ik denk dat ik nu ongeveer weet wat de bedoeling is dus kan ik de code net zo goed zelf maken

zo iets?:
HTML: 
<a href="#" data-id="1" class="link">div 1</a>
<a href="#" data-id="2" class="link">div 2</a>
<a href="#" data-id="3" class="link">div 3</a>


<div class="box div-1" style="display: none;">
Dit is div 1
</div>
<div class="box div-2" style="display: none;">
Dit is div 2
</div>
<div class="box div-3" style="display: none;">
Dit is div 3
</div>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$( ".link" ).click(function() {
  //er is op een link geklikt
  $( ".box" ).hide();
  var div_id = $( this ).data( "id" );
  $( ".div-" + div_id ).toggle();
});
</script>
 
Laatst bewerkt:
Oké.. normaal heb ik script boven de head staan. Toen deed hij het niet. Nu onder de code gezet. En jawel top.

Ga het implementeren in mijn site. Grote verwachting dat het gaat werken.

Super bedankt en dat na dagen op internet zoeken. TOP!!!
 
Maar wel een vraagje. waarom werkt het wel als de script onder de code staat en niet als het daarboven staat?
 
Zo als je kunt zien heb ik de code iets aangepast nu moet hij wel in de head werken:
http://jsfiddle.net/wp2c7buL/2/

Dit komt omdat eerst de HTML geladen moet zijn voor de Javascript.
Maar door het gebruik van dit stukje is dat op te lossen:
HTML: 
 $( document ).ready()
 
Laatst bewerkt:
jah zeker, helemaal geweldig. Ik kan weer verder. En weer wat geleerd. Bedankt!! :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan