Archief - JS: meerdere hidden <div> unhidden zetten met 1 klik

JMke · 2 feb 2006

De JavaScript code

<script type="text/javascript">
function handleContent(elementId) {
var element = document.getElementById(elementId);
if (element.style.display == "none") {
element.style.display = 'inline';
} else if (element.style.display == "inline") {
element.style.display = 'none';
}
}
</script>

het gebruik ervan:

<a class='newstitle' title='Click to expand the summary' onclick="handleContent('newscontent_21201');"><img src=http://www.madshrimps.be/forums/images/icons/icon23.gif border=0> Apple Makes the Switch: iMac G5 vs. iMac Core Duo</a><br>

<div id="newscontent_21201" class="hidden" style="display:none;"><br />summary text</div>

als er nu iemand op die titel klikt dan klapt de summary open, in gebruik hier: www.madshrimps.be

nu ben ik op zoek hoe ik men 1 klik/link al die hidden divs kan laten zien? Heeft er iemand hier ervaring mee?

WoDkA · 2 feb 2006

zoiets denk'k ?

PHP:

<script type="text/javascript">

function handleContent()
{
	for ( i = 1 ; i < 5 ; i++ )
	{
	var element = document.getElementById("newscontent_" + i);

      if (element.style.display == 'none') 
      {
        element.style.display = 'inline';
      } 
      else 
      {
        element.style.display = 'none';
      }
	}
}

</script>

hier loopt hij nu wel door newspost_1, newspost_2, etc .. en ik loop hier nu wel tot 5 ter demo ( mss als parameter in handleContent nr van laatste post meegeven ? en eventueel begin nr )

JMke · 2 feb 2006

hey, bedankt voor je reply,

is er een manier om een wild card mee te geven aan die newscontent?

in the likes of document.getElementById("newscontent_*); ?

orez · 2 feb 2006

uh? en waarom zou da nodig zijn? :/

JMke · 2 feb 2006

uhm... om dees reden:

"nu ben ik op zoek hoe ik men 1 klik/link al die hidden divs kan laten zien?"

Tombo · 2 feb 2006

Wel als je een array bijhoudt van alle id's, bvb dat de pagina dynamisch wordt gecreerd, kan je dan in die array doorgeven naar javscript. In javascript zoek je dan over de volledige array, en maak je visible indien het aan een reguliere expressie overeenkomt.

Ik denk wel dat dit net wat gecompliceerder is dan wat jij in gedachten had. Ik zou dan echt doen zoals Wodka, of je kan een ipv een cijfer, ook een nieuwe array nakijken met delen van id's die gehide moeten worden.

Veel geluk!

Cakeman · 2 feb 2006

Ik heb dit niet getest, maar ik denk dat je het in deze richting moet zoeken.

Wat je gaat doen is eerst een collectie maken van alle div's (getElementsByTagName("div")). Deze collectie ga je één voor één doorlopen en je gaat kijken welk ID begint met "newscontent_". De div ID's die hiermee beginnen ga je vervolgens zichtbaar maken.

PHP:

function showDivs() {
  var beginstring = "newscontent_";
  var len = beginstring.length;
  var ndx;
  var element;
  var selectTagsCount = document.getElementsByTagName("div").length;
  for (ndx=0; ndx < selectTagsCount; ndx++) {
      element = document.getElementsByTagName("div")[ndx];
      if(element.id.substring(0, len-1) == beginstring) {
          element.style.display = "inline";
      }
  }
  return(true);
}

orez · 2 feb 2006

JMke zei:
uhm... om dees reden:

"nu ben ik op zoek hoe ik men 1 klik/link al die hidden divs kan laten zien?"

zoals wodka het omschrijft dus werkt perfect...

uw 1ne link geef je enkel handleContent() mee als onclick

En als uw nieuwsberichten geparsed worden bv stel je een teller in op 1

dan laat je parsen door teller getal.

PHP:

$teller = 1;

while(...) {

 //write html code here
echo "<div id=\"newscontent_" . $teller . "\">blabla</div>"

 $teller++
}

en uw javascript

--> ge doet ne num_rows op uw database.

steekt da in ne variabele, bv $total.

dan doede simpelweg:

Code:

for(i=1;i=<?php echo $total ?>;i++) {
 var oDiv = document.getElementByID("newscontent_" + i)
  if (oDiv.style.display == "none") {
   oDiv.style.display == "inline"; //block, inline-table (depends)
 } else {
  oDiv.style.display == "none";
 }
}

Dus met andere woorden, moet je uw topic start niet gaan quoten, want je hebt dus helemaal geen wildcard nodig...

En als je divs een vast aantal elementen zijn... dan hebjet nog makkelijker...

Cakeman · 3 feb 2006

orez zei:
En als je divs een vast aantal elementen zijn... dan hebjet nog makkelijker...

En als zijn divs nu eens geen sequentiele nummering hebben?

orez · 3 feb 2006

Cakeman zei:
En als zijn divs nu eens geen sequentiele nummering hebben?

dan moet hij maar zorgen dat ze da wel hebben?

JMke · 3 feb 2006

good point Cakeman; die divs zijn niet echt sequentieel; kan af en toe een nummer of 2-10 overgeslagen worden.

waarom ik met een * wil werken is dat ik dan geen array of gelijksaardig moet gebruiken.. er bestaat dus geen functie in javascript die dit toelaat?

orez · 3 feb 2006

als gij uzelf een teller programmeert...

$teller++ zoals in mijn geval, als uw database id's als voorbeeld nu 2, 10, 20 zijn zal dien $teller er mooi 1 2 3 van maken, die telt namelijk het aantal ... is dit aantal 3 dan zal hij mooi 1 2 3 doen...

man man, wat een discussie voor iets simpel :/

+ geen sequentiele nummering snap ik eig nog minder wa het probleem is.

in plaats van me ne for lus te werken, uw javascript code gaan copy pasten zonder de fur lus hé aja... manueel is dan de beste oplossing hé ...

JMke · 3 feb 2006

gij zijt ook de vriendelijkste van het forum zeker?

EXCUSE ME dat ik php/javascript niet binnen en vanbuiten ken hé. jeezus man; als ik alles weet moest ik hier geen thread starten.

orez · 3 feb 2006

je krijgt de code kant en klaar van mij voor je neus, met de nodige uitleg, maar toch blijf je moeilijk doen.

Je kan idd niet alles weten, maar als hier al verscheidene personen moeite doen om u wijs te maken hoe je te werk moet gaan, en er staat hier juiste code, meermaals, en dan doe ik nog eens moeite om het voor u volledig uit te typen (ha wat ik ben toch onvriendelijk). Probeer het dan en test het dan... kom je dan opnieuw een probleem tegen kom het dan zeggen.

Maar kom hier niet heeltijd van da kan ni werken mijn divs zijn niet sequentieel blablabla... just try it.

En gelieve op uw taalgebruik te letten, danku.

JMke · 3 feb 2006

wat is er dan precies "mis" met mijn taalgebruik.

ik krijg "de code"... nice, geen klagen over, mijn enige vraag was ofdat het misschien OOK via een WILDCARD werkt.

een vraag.. ja.. in een forum.

orez · 3 feb 2006

JMke zei:
wat is er dan precies "mis" met mijn taalgebruik.

ik krijg "de code"... nice, geen klagen over, mijn enige vraag was ofdat het misschien OOK via een WILDCARD werkt.

een vraag.. ja.. in een forum.

waarop ik antwoorde dat een wildcard niet nodig is als je een teller gaat gebruiken die automatisch je divs sequentieel gaat nummeren. En er dus in feite geen wildcard aan te pas komt. (Antwoord op je vraag (nee dus) + oplossing)

En je taalgebruik gaat hem erover van "jij bent ook zeker de vriedelijkste, ..." nadat je effectief geholpen bent geweest.

Cakeman · 3 feb 2006

JMke zei:
good point Cakeman; die divs zijn niet echt sequentieel; kan af en toe een nummer of 2-10 overgeslagen worden.

waarom ik met een * wil werken is dat ik dan geen array of gelijksaardig moet gebruiken.. er bestaat dus geen functie in javascript die dit toelaat?

Voor zover ik weet niet. Maar je kan altijd de oplossing die ik enkele posts hierboven aangehaald proberen. Die werkt een beetje als een wildcard functie.

zero2one · 4 feb 2006

geef al uw div dezelfde class name en gebruik dan

Document.getElementsByClassName

Archief - JS: meerdere hidden <div> unhidden zetten met 1 klik

JMke

Legacy Member

WoDkA

Legacy Member

JMke

Legacy Member

orez

Legacy Member

JMke

Legacy Member

Tombo

Legacy Member

Cakeman

Legacy Member

orez

Legacy Member

Cakeman

Legacy Member

orez

Legacy Member

JMke

Legacy Member

orez

Legacy Member

JMke

Legacy Member

orez

Legacy Member

JMke

Legacy Member

orez

Legacy Member

Cakeman

Legacy Member

zero2one

Legacy Member