div hidden/visible

Door klaas op 11-05-2007 15:56

3.745 views

Ik wil doormiddel van een klik een div laten verschijnen op mijn site. Op dit moment doet hij dat alleen laat gelijk de rest van de div's verdwijnen. Ik wil dat hij alleen de div laat verdwijnen en zien die een id hebben. Heeft iemand een idee hoe ik dat kan declareren in de functie. Ik weet dat dit in dit gedeelte moet: var divs = document.getElementsByTagName('div');
alleen ik weet niet hoe ik precies in het ('div') gedeelte ook kan aangeven dat hij een id moet zien.

javascript in de header


	<script language=javascript type='text/javascript'>
    function showdiv(pass) {

    
		<b>var divs = document.getElementsByTagName('div'); ,</b>
		for(i=0;i<divs.length;i++){
         if(divs[i].id.match(pass)){//if they are 'see' divs
          if (document.getElementById) // DOM3 = IE5, NS6
          divs[i].style.visibility="visible";// show/hide
         else
        if (document.layers) // Netscape 4
        document.layers[divs[i]].display = 'visible';
        else // IE 4
        document.all.divs[i].visibility = 'visible';
        } else {
        if (document.getElementById)
        divs[i].style.visibility="hidden";
        else
        if (document.layers) // Netscape 4
        document.divs[i].visibility = 'hidden';
        else // IE 4
        document.all.divs[i].visibility = 'hidden';
       }
      }
     }
    </script>

div output


   echo "<td><div id=\"". $var_id ."\" style=\"position: absolute; left:10px; top:54px; background-color: #EEEEEE; border: 1px none #000000; visibility: hidden\"></td>\n";
   echo "</tr>\n";

Crispijn -

14-05-2007 07:35

Jep dat klopt. En die gegevens knalt hij dan weer in het div toon. Dat is toch even een mooi voorbeeld van AJAX :D

k klaas

14-05-2007 09:14

Dan vraag ik me af waar hij nou de gegevens zoals email, naam etc. uit de database haalt. in het bestand toon worden alleen de divs aangeroepen of komt het id overeen met de naam van het veld in de database ?

<div id="stud_leeftijd">
Leeftijd:
jaar
</div>

J Jacco Engel

14-05-2007 09:33

Mischien dom idee maar is het geen optie om gewoon de id mee te geven aan de functie?

k klaas

14-05-2007 10:05

Remco schreef op 11.05.2007 18:51
ik zou het zo doen:
<script language=javascript type='text/javascript'>
function showdiv() {
  var main = document.getElementById('main');
  var divs = main.getElementsByTagName('div');
  for(i=0;i<divs.length;i++){
    if(divs[i].id) {
      divs[i].style.display = (divs[i].style.display == 'none') ? 'block' : 'none'
    }
  }
}
</script>
je moet een div om de andere divs heen zetten met de id main.

elke keer als je de functie aanroept, verschijnen of verdwijnen de divs met een id.

ik hoop dat dat was wat je nodig had?

Op deze manier lukt het bijna, alleen krijg alleen de eerste keer iets te zien wanneer ik op ABNAMRO klik. Bij de andere zie ik de divs dan niet.

http://engelen.vigourmedia.nl/opdrachtgevers.php


echo "<div id=\"main\">";
   echo "<div id=\"". $var_id ."\" style=\" left:150px; top:54px;  border: 1px none #000000; visibility: hidden\">";
   
   echo "</table>\n";
   echo "<tr>\n";
   echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
   echo "</tr>\n";
   
   echo "<tr>\n";
    echo "<td><p>" . $var_omschrijving . "</p></td>\n";
   echo "</tr>\n";  
   
   echo "<tr>\n";
   echo "<td><a target=\"_blank\" href=http://" . $var_website . ">" . $var_website . "</a></td>\n";

   echo "</tr>\n"; 
   echo "</table><br/>\n";
  echo " </div>\n";

k klaas

16-05-2007 11:36

Op dit moment lukt het me om de omschrijving zichtbaar te maken na te klikken op een bedrijf.
Maar het is de bedoeling dat wanneer je op een andere bedrijfsnaam aan de rechterkant klikt de andere omschrijving verdwijnt en de nieuwe zichtbaar wordt. http://engelen.vigourmedia.nl/opdrachtgevers.php

Ik gebruik nu dit:


    <script language=javascript type='text/javascript'>
	function showdiv(pass){
	
	var t=document.getElementById(pass)

	if(t.style.visibility=='hidden'){
	t.style.visibility='visible';
	}else{
	t.style.visibility='none';
	}
}

Ik probeer het door middel van een extra div die main heet met deze code, maar dan gebeurt er helemaal niks meer. Iemand de oplossing? zou super zijn :)


    <script language=javascript type='text/javascript'>
	function showdiv(pass){
	
var divs = main.getElementsByTagName('div');		
	var t=document.getElementById(pass)

	document.all.divs.visibility ='hidden';

	if(t.style.visibility=='hidden'){
	t.style.visibility='visible';
	}else{
	t.style.visibility='none';
	}
}

J Jurgen assaasas

16-05-2007 14:57

Ik zit ookal een tijdje met zoiets. Ik zoek eigenlijk een script als dit

Crispijn schreef op 11.05.2007 16:39
ik gebruik altijd deze functie:

<?php
//show hide ingegeven element
function showHide( ele ) {
var div = document.getElementById (ele);

if (div.style.display == 'none') {
div.style.display = 'block';
}else {
div.style.display = 'none';
}
}
?>

werkt als een trein.

p.s. php tags toegevoegd voor de kleurtjes!

Maar dat je dan afzondelijke divs kan aansturen bijv:


<div id="div1">Content</div>
</div>

<a href="#"onclick="doe iets voor 1">hide/show 1</a>

<div id="div1">Nog meer content.</div>
</div>

<a href="#" onclick="doe iets voor 2">hide/show 2</a>

Crispijn -

16-05-2007 15:43

dat doet deze toch?


<a href="onClick="showHide('jedivid')">toggle</a>

edit:
sorry om te toggelen heb je deze nodig, dan maakt 't ook niet uit of hij op none of block staat

<?php
//show hide ingegeven element
function showHide( ele ) {

var div = document.getElementById (ele);

if (div.style.display == 'none') {
div.style.display = 'block';
}
else if (div.style.display =='block') {
div.style.display = 'none';
}
else {
div.style.display = 'none';
}
}
?>

J Jurgen assaasas

16-05-2007 15:50

OK, dan weet ik dat erg simpele functie en heel handig :)

k klaas

16-05-2007 17:33

Opgelost :D

<script type='text/javascript'>
var previousdiv = false;
function showdiv(id) {
if (previousdiv) {
document.getElementById(previousdiv).style.display = 'none';
}
document.getElementById(id).style.display = 'block';
previousdiv = id;
}
</script>

Reageren

Inloggen om te reageren