11548 sujets

JavaScript, DOM et API Web HTML5

Afficher/cacher contenu en jquery

bonjour à tous,
je cherche à afficher et cacher un contenu d'une div sur la droite de l'écran, avec jquery.
Le tout à l'aide d'une petite croix sur laquelle je clique quand je veux ouvrir et je reclique quand je veux fermer

Avez vous un ti tuto à me conseiller ?
Merci par avance.
Salut,

Je pense que tu as des bases en jQuery ?

Penche-toi sur la fonction .toggle() qui ferme/ouvre automatiquement. Sinon .slideUp() et .slideDown().

Pour l'usage un truc du genre : $( tonBouton ).children( tonDiv_aFermer ).toggle();


a+
Greg
Axiuss a écrit :
Salut,

Je pense que tu as des bases en jQuery ?

Penche-toi sur la fonction .toggle() qui ferme/ouvre automatiquement. Sinon .slideUp() et .slideDown().

Pour l'usage un truc du genre : $( tonBouton ).children( tonDiv_aFermer ).toggle();


a+
Greg


Merci Axiuss,

hey non, justement, je suis par un expert jquery. Et je galère un peu.

J'ai essayé 

$("a.showhide").click(function () {
        $("a.showhide").toggle();
        $(this).children("#content").toggle("slow");


Mais ca ne marche plus, j'ai pas d'action jquery.

Sinon, j'ai ca 
  [code=javascript]$("a.showhide").click(function () {
        $("a.showhide").toggle();
        $("#content").toggle("slow");
[/code]

L'animation marche nikel, mais le bouton qui actionne l'animation disparait avec la div, du coup pas moyen de rappuyer dessus pour que la div content revienne.

Si vous avez le solution, je prends Smiley cligne

Mon code html est le suivant : 


<div id="content">
<a class="showhide" href="#"><span class="accordiona"></span></a>
<!-- Lien permettant de replier le code -->
<a class="showhide" style="display: none;" href="#"><span class="accordionb"></span></a>	
<div class="post">
Le contenu 
</post>
                
</div><!-- end div content -->


et le css, on sait jamais : 
#content {position:relative;background:#000000; float: right; width:405px; padding-bottom: 70px; min-height: 600px; height: 100%;}
span.accordiona {z-index: 1001; position:absolute; top: 10px; left:365px; background: url(img/accordion.png) 100% 0% no-repeat; height: 24px; width: 25px; display: block}
span.accordionb {z-index: 1001; position:absolute; top: 10px; left:365px; background: url(img/accordion.png) 0% 0% no-repeat; height: 24px; width: 25px; display: block}


Merci
Pour que ton bouton reste et bah sort le de la div qui est affecter par le toggle.
Rien de plus simple.
ou encore plus simple dans ton code javascript : 

$("a.showhide").click(function () {
        $("a.showhide").toggle();
        $(".post").toggle("slow");


Comme sa seul ton post est dérouler.
thej8 a écrit :
Pour que ton bouton reste et bah sort le de la div qui est affecter par le toggle.
Rien de plus simple.
ou encore plus simple dans ton code javascript : 

$(&quot;a.showhide&quot;).click(function () {
        $(&quot;a.showhide&quot;).toggle();
        $(&quot;.post&quot;).toggle(&quot;slow&quot;);


Comme sa seul ton post est dérouler.


Le sortir, j'y arrive pas, j'ai un design en fullscreen et j'arrive pas à positionner le bouton d'ouverture et de fermeture comme il faut.
Le top, c'est de mettre en position relative le content et mettre les boutons en position absolute.
J'ai utilisé ton JS, j'ai mis mon background content en transparent, et en effet, seul le .post disparait en laissant le bouton à sa place. Mais problème, mon toggle ne pars plus vers la droite de l'écran, mais vers le haut. Du coup l'animation est pas top.
Une idée ?
Sujet clos
Aller à