Jquery Toggle hide op een div

Door Jan Graneker op 27-07-2016 15:02

2.103 views

Goedemiddag Allemaal,

Ben even bezig met een Toggle hide



$("button").click(function(){
    $("p").toggle();
});

In plaats van de paragraaf wil ik een gehele div hiden. Hoe is dit te doen?

[size=xsmall]Toevoeging op 27/07/2016 15:04:49:[/size]

Kon natuurlijk gewoon .div toevoegen. Voor degene die het zoeken:

$("button").click(function(){
$(".jouwdivnaam").toggle();
});

Thomas van den Heuvel

27-07-2016 15:30

Misschien wel handig om dit niet hard te koppelen aan een specifieke tag (in dit geval "button"), en wellicht ook handig om aan te geven welke div precies verborgen dient te worden zodat deze functie hergebruikt kan worden. Dit zou je kunnen doen met een data-attribuut waarin het id van de div zit. En tot slot is het mogelijk verstandig om het "default gedrag" van het klikken op de button expliciet af te vangen, zodat deze verder niets (ongedefinieerds) doet.

Desgewenst kan ik wel een voorbeeldje in elkaar zetten.

Jan Graneker

27-07-2016 15:38 gewijzigd op 27-07-2016 15:40

Zeker ben heel benieuwd hoe het slimmer kan.

Ik dit geval heb ik hem zo gemaakt



$("button").click(function(){
    $(".temp").toggle();
});

De button is in dit geval <button>X</button> om de melding te sluiten.



$(".temp").toggle();

Hoe kan ik het data-* attribut hier goed voor gebruiken?

Ik heb deze gebruikt om een vakantie melding weer te geven op een homepagina. De div TEMP is een blok met daarin een paragraaf met de tekst wanneer deze dicht zijn. Recht boven in heb ik de <button> geplaatst, zodat deze na het lezen verdwijnt.

Thomas van den Heuvel

27-07-2016 16:13

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>
</head>

<body>
<div id="div_1">one</div><button class="js-div-toggle" data-target="div_1">clicky</button><br />
<div id="div_2">two</div><button class="js-div-toggle" data-target="div_2">clicky</button><br />
<div id="div_3">three</div><button class="js-div-toggle" data-target="div_3">clicky</button><br />
etc.
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('button.js-div-toggle').click(function(e) {
        e.preventDefault();
        $('#'+$(this).data('target')).toggle();
    });
});
//]]>
</script>
</body>
</html>

Reageren

Inloggen om te reageren