Afficher, de Masquer des DIV avec Jquery

Donc, pour ce faire, le moyen le plus facile (omi) est de créer un conteneur pour votre bouton + boîte (ce que vous voulez cacher). Votre bouton de rester sur place, toujours. Lorsque le chargement de la page, nous attachons un événement à votre bouton permettant d'afficher et de masquer votre boîte basée sur la case de l'état actuel (si elle est cachée, montrer et si elle est visible, le cacher).

Assez facile.

Maintenant, vous aussi vous voulez persister visible/caché, entre le chargement de la page /la page des visites. Pour ce faire, vous allez avoir besoin d'un cookie sur le navigateur de l'utilisateur (note de côté, si votre utilisateur est connecté ou quelque chose, vous pouvez le faire d'une autre manière - mais un cookie est le plus léger de façon à faire et ne nécessite pas un serveur aller-retour pour enregistrer les données dans votre base de données).

Pour ce faire, je suggère d'aller et obtenir le jQuery Plugin Cookie c'est vraiment simple à utiliser (comme vous pourrez le voir ci-dessous) et prend beaucoup de maux de tête hors de traiter avec des cookies. Chaque fois qu'un utilisateur clique sur le bouton, et vous modifiez l'état de la boîte, vous allez écrire un cookie sur le navigateur de l'utilisateur et de les stocker de l'état actuel de la boîte. De cette façon, lorsque l'utilisateur de re-charge la page, vous saurez quel est l'état actuel (en raison de l'cookie). Dans l'exemple ci-dessous, j'ai mis le cookie expirera dans un an, mais vous pouvez le changer si vous le souhaitez.

<div id="ShowHideContainer">
<p><a id="ShowHideButton">Click Here To Hide!</a></p>
<div id="ShowHideBox">text that gets shown and hidden, woo</div>
</div>
<script>
$(document).ready(function()
{
var $ShowHideBox = $('#ShowHideBox').hide(),
$ShowHideButton = $('#ShowHideButton');
/* Initialize the box based on the state of the cookie in the user's browser*/
initBox();
$('#ShowHideButton').click(function() {
if (boxVisible())
{
//the box is visible. lets hide it.
hideBox();
}
else
{
//the box is invisible. show it.
showBox();
}
});
function initBox()
{
//if the cookie says this is visible, and it's not...show it
if ( $.cookie('BoxVisible') && ! boxVisible() )
{
showBox();
}
//if the cookie says this is not visible, and it is...hide it
else if ( ! $.cookie('BoxVisible') && boxVisible() )
{
hideBox();
}
}  
//check to see if the box is visible or not, currently
function boxVisible()
{
return $ShowHideBox.hasClass('hidden')? false : true;
}
//show the box, change the button text, and set the cookie
function showBox()
{
$ShowHideBox.slideUp(250).removeClass('hidden');
$ShowHideButton.html("Click Here to Hide!");
$.cookie('BoxVisible', 1, {expires: 365});
}
//hide the box, change the button text, and set the cookie
function hideBox()
{
$ShowHideBox.slideDown(250).addClass('hidden');
$ShowHideButton.html("Click Here to Show!");
$.cookie('BoxVisible', 0, {expires: 365});
}
});
</script>

OriginalL'auteur Jim Rubenstein

$('#showHidetoggle').click(function() {  
var boxText = $('#showHideBox').is(":visible") ? "Show me" : "Hide me";
$("#showHidetoggle").text(boxText);
$('#showHideBox').slideToggle(250);
return false;
});

Pour sauver l'état, vous devez soit utiliser le serveur de code côté ou de l'utilisation d'un cookie.

OriginalL'auteur Peter Olson

1. Vous pouvez utiliser if ($('#showHideBox').is(':visible') == True) {/*change text*/} else {/*change text*/} pour modifier le texte à afficher/masquer au besoin.
2. Vous aurez envie de mettre le bouton afficher/masquer l'extérieur de la boîte que vous êtes cacher.
3. Vous pouvez utiliser des cookies ou des sessions ou Local De Stockage pour stocker l'information qui doit persister au chargement de la page. Vous aurez besoin de définir l'état initial de la zone d'montré/caché lorsque le chargement de la page.

OriginalL'auteur mdonoughe