[JS]Click show div, 1 tegelijk laten zien.

[MrVegeta]

Ik ben bezig met mijn portfolio en nu heb ik een script gevonden die goed bij mijn wensen past alleen wil ik er één ding aan veranderen maar mijn JS ervaring is praktisch 0. Het script zorgt ervoor dat je een div met display none kan laten zien door op een linkje te klikken, werkt prima maar nu is het zo dat ik meerdere van de linkjes heb en dat de divjes open blijven staan zodat er bv 3 van deze divjes over elkaar heen gaan.

Deze code zorgt er dus voor dat het werkt.

JavaScript:

function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}

Dit is een stukje van de html. Zoals je ziet krijgt elke div een aparte naam zodat de link weet welke die moet laten zien.

HTML:

<div id="lara_word" style="display:none; position:absolute; width:450px; height: 200px; background-color:#0b0b0b; border: 1px solid black; padding-left:14px; opacity:0.9;filter:alpha(opacity=100)">
<p>Content goes here.</p>
</div>
<div id="lara_photoshop" style="display:none; position:absolute; width:450px; height: 200px; background-color:#0b0b0b; border: 1px solid black; padding-left:14px; opacity:0.9;filter:alpha(opacity=100)">
<p>Content goes here1.</p>
</div>

En deze code zorgt ervoor dat als er op een plaatje wordt geklikt dat die de div laat zien.

HTML:

<a href="javascript:ReverseDisplay('lara_word')">
<img src="images/portfolio/icons/word.png" alt="Microsoft Word bestanden."></img></a>

<a href="javascript:ReverseDisplay('lara_photoshop')">
<img src="images/portfolio/icons/photoshop.png" alt="PSD bestanden."></img></a>

Maar hoe kan ik het zo maken dat telkens wanneer er een andere link wordt aangeklikt dat de vorige weer op display:none gaat? Zodat er telkens maar één divje zichtbaar is.

[Enfer]

Alle bekende velden op display:none zetten behalve degene die je net aangeklikt hebt? Of denk ik nu te makkelijk?

[MrVegeta]

Ze staan al op display: none, als op de link wordt geklikt om de div te laten zien verandert dit naar display: block maar wanneer er op nog een link wordt geklikt blijft die "oude" dus op display: block zodat die ook zichtbaar wordt en ze over elkaar heen vallen. Dus ik wil wanneer er op een andere link wordt geklikt dat de oude terug gaat naar display: none.

[jbdeiman]

Kijk eens naar "jquery accordion" dat doet precies wat jij wilt!

[MrVegeta]

Nee niet echt .

Zo ziet het er normaal uit.


Wanneer er op de de bovenste knop aan de linkerkant wordt gedrukt komt er een layer over het plaatje heen waar wat content en links naar bestanden staan.


En wanneer er op de knop er onder wordt gedrukt komt er een andere layer met andere content en linkjes over het plaatje heen.


Maar de content van link 1 blijft nog op display: block staan en dus blijft het zichtbaar.

Nu ik er aan denk heb ik al eens zoiets gemaakt tijdens mijn stage,
http://www2.lupige.nl/showcase/horeca/bites/ nou uitzoeken hoe ik dat in mijn situatie kan gebruiken.

[ Voor 12% gewijzigd door MrVegeta op 06-11-2009 13:52 ]

[MrVegeta]

Even een bumpje, hoop dat iemand een oplossing weet.

[Verwijderd]

Volgens mij is de oplossing al gegeven.. zorg dat elke keer dat er geklikt wordt, alle contents op display:none worden gezet, en dan de aangeklikte op display:block

[MrVegeta]

Oh zo okay, ik begrijp wat je bedoelt alleen zoals ik al hierboven zei is mijn JS kennis niet zo groot, ik begrijp wel hoe het script werkt (denk ik),

Geeft de naam aan van de functie zodat de html code weet wat die moet "aanspreken" in de JS.

JavaScript:

function ReverseDisplay(d) {

Als de display van de geklinkte link op display none staat moet hij de volgende actie uitvoeren.

JavaScript:

if(document.getElementById(d).style.display == "none"){ document.getElementById(d).style.display = "block"; } 

Wanneer er weer op wordt geklikt moet hij die sluiten.

JavaScript:

else { document.getElementById(d).style.display = "none"; }
}

Maar hoe ik de functie erbij zet om dus alle id's af te sluiten behalve diegene die wordt aangeklikt weet ik niet.

Na een uurtje of wat googlen en verschillende scripts gebruiken heb ik het gevonden op,
http://www.html-site.nl/forum/9_16670_0.html (voor iedereen die er ooit nog naar zoekt).

JavaScript:

var active_div_id = '';
 
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
HideContent(active_div_id);  // Hide active id.
document.getElementById(d).style.display = "block";
active_div_id=d;  // New active id.
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") 
  ShowContent(d);  // Code changed here!!!
else 
  HideContent(d); // Code changed here!!!
}

HTML:

div class="base">
<p>Branche oplossingen:</p>
<ul>
<li><a href="javascript:ReverseContentDisplay('1')"><font color="white">Professionele dienstverlening</a></li>
<li><a href="javascript:ReverseContentDisplay('2')"><font color="white">Retail</a></li>
<li><a href="javascript:ReverseContentDisplay('3')"><font color="white">Industrie</a></li>
<li><a href="javascript:ReverseContentDisplay('4')"><font color="white">Hotel</a></li>
<li><a href="javascript:ReverseContentDisplay('5')"><font color="white">Educatie</a></li>
</ul>
</div>

<div id="1"
style="display:none;
position:absolute;
left:10px;
padding: 20px;">
<p>wij bieden een oplossing voor de professionele dienstverlening die alle diensten zoals Voice, data en beveiligingsystemen integreert in een communicatie systeem. Dit verhoogt de productiviteit en flexibiliteit van de organisatie.
De professionele dienstverlening kan op deze wijze veel geld besparen tijdens de implementatie, en omdat alle diensten gebruik maken van dezelfde infrastructuur zal dit ook een besparing opleveren.
</p><br>
<p>Deze oplossing biedt:</p>

<li>Geintegreerde Voice en Data communicatie</li>
<li>Besparing van kosten door het gebruik van 1 platform</li>
<li>IP toestellen en traditionele toestellen beide toepasbaar</li>
<li>Snelle en veilige internet toegang</li>
<li>Flexibele werkplaatsen op kantoor maar op thuis</li>
<li>Naadloze intergratie met Microsoft CRM en Exchange</li>
</div>

[ Voor 58% gewijzigd door MrVegeta op 07-11-2009 19:22 ]

[XWB]

<div id="1"> is niet geldig, een id mag niet met een cijfer beginnen.

[MrVegeta]

Hm ik gebruik dat zelf ook nooit maar goed het voorbeeld werkt enzo . Dus mocht iemand ooit in dit topic terecht komen via de search dan kan hij dit ook mooi gebruiken.

[Patriot]

MrVegeta schreef op zondag 08 november 2009 @ 20:59:
Hm ik gebruik dat zelf ook nooit maar goed het voorbeeld werkt enzo . Dus mocht iemand ooit in dit topic terecht komen via de search dan kan hij dit ook mooi gebruiken.

Als je waarde hecht aan de correctheid van je HTML dan kun je die id's gewoon wijzigen zonder dat het scriptje stopt met werken. Je moet gewoon zorgen dat het id van je div hetzelfde is als het id in de corresponderende call naar ReverseContentDisplay().

[MrVegeta]

Zoals ik zei, ik gebruik zelf altijd gewoon id namen maar ik heb gewoon het script gekopieerd.