1 <div> openen en de rest sluiten

Status
Niet open voor verdere reacties.

PepijnKosman

Nieuwe gebruiker
Lid geworden
16 nov 2017
Berichten
1
Mijn vraag is, hoe kan ik mijn javascript aanpassen om een <div> te openen met een button of afbeeldingen terwijl mijn <div> in een andere rij of sectie staat, en de niet geselecteerde <div>'s sluiten.

Met dit javascript kan ik een bepaalde <div> toggelen maar het sluit mijn andere <div>'s niet:

Code:
<script type="text/javascript">
 jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e){
e.preventDefault();jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>
-----------------------------------

Daarnaast heb ik het geprobeerd met een accordion, Maar dan moet mijn Content in mijn <div> onder mijn knop staan. En het is juist de bedoeling om in het midden van de pagina mijn content te laten zien
:

Code:
<script>
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {
 acc[i].onclick = function() {
 var setClasses = !this.classList.contains('active');
 setClass(acc, 'active', 'remove');
 setClass(panel, 'show', 'remove');
 
 if (setClasses) {
 this.classList.toggle("active");
 this.nextElementSibling.classList.toggle("show");
 }
 }
}

function setClass(els, className, fnName) {
 for (var i = 0; i < els.length; i++) {
 els[i].classList[fnName](className);
 }
}
</script>
-----------------

Als iemand mij hier mee zou kunnen helpen zou ik heel dankbaar zijn.
 

Bijlagen

  • afbeelding1.jpg
    afbeelding1.jpg
    206,7 KB · Weergaven: 52
  • afbeelding2.jpg
    afbeelding2.jpg
    178,9 KB · Weergaven: 50
Laatst bewerkt door een moderator:
Ik heb maar even de code tags om je code gezet.
Dat leest iets makkelijker voor de helpers.
 
Hoe ziet de HTML-structuur van de pagina er uit? Die is nogal relevant om een oplossing te kunnen bieden ;)
 
Zomaar een opzetje die je zelf verder kan aanpassen
Code:
<span id="img1" class="item-btn">Knop-1</span>
<span id="img2" class="item-btn">Knop-2</span>
<span id="img3" class="item-btn">Knop-3</span>

<div class="item img1" style="background:#ff0">item 1</div>
<div class="item img2" style="background:#f0f">item 2</div>
<div class="item img3" style="background:#0ff">item 3</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.item').hide().addClass('closed');
$('.item-btn').click(function(e){
  e.preventDefault();
  $('.item').hide().removeClass('opened').addClass('closed');
  clickedItemClass = '.' + $(this).attr('id');
  $(clickedItemClass).slideToggle().removeClass('closed').addClass('opened');
});
});
Suc6. Have fun.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan