SlideToggle vers le haut qui pousse le bloc du dessus

Bonjour,

Alors voilà, j'essaye désespérément depuis hier à faire en sorte d'obtenir le résultat voulu sur un bout de code qui permet de faire apparaitre un bloc déroulant par l'intermédiaire d'un "slideToggle" poussant vers le haut le premier bloc (sur lequel on clique pour faire apparaitre/disparaitre le second).

Afin de vous donner une idée de quoi je parle, voici une image peut-être plus parlante ainsi qu'un bout de code sur JSFiddle dans lequel il me manque à faire pousser vers le haut le premier bloc (au dessus du second).

Image : http://nsa34.casimages.com/img/2015/03/25/150325101528999272.jpg (voir "achat express")

JSFiddle : http://jsfiddle.net/MisterHims/h7syo4mv/

Merci par avance,

Cordialement,

Bonjour,

il faudrait créer un bloc parent déjà pour tester puis aligner les éléments en bas. C'est faisable avec un positionnement absolu ou display table/table-cell et vertical-align:bottom.
Modifié par bzh (25 Mar 2015 - 10:45)

Bonjour et merci de ton intérêt !

Alors j'ai suivi tes conseils mais rien n'y fait, j'ai à peu près testé toutes les propriétés que tu as précédemment définis mais rien n'y fait. Mon bloc "#panel" ne pousse en aucun cas le bloc du dessus vers le haut

Je vais encore continuer de chercher la solution en essayant divers propriétés en attendant d'autres solutions.

Merci encore !

PS : Voir la version JSFiddle à jour : http://jsfiddle.net/MisterHims/h7syo4mv/1/
Modifié par Mister-Hims (25 Mar 2015 - 11:14)

Je suis pas un habitué de jsfiddle alors je te colle ce que j'ai fais ici :

Avec absolute :

<div id="parent">
<div id="enfant">
<div id="box">
</div>
<div id="panel">
</div>
</div>
</div>

$("#box").click(function(){
    $("#panel").slideToggle();
}, function(){
    $("#panel").slideToggle();
});

#parent {
    position:relative;
    background: #ccc;
    height: 300px;
}
#enfant {
    position:absolute;
    bottom: 0;
}
#box
{
    display:block;
    height: 20px;
    width:200px;
    border: 1px solid #000;
    margin-top: 200px;
}
#panel
{
    display: none;
    width:200px;
    height:50px;
    border: 1px solid red;
}

Le code est un peu atteint de divite mais voilà l'idée.

Avec table-cell :

<div id="parent">
<div id="box">
</div>
<div id="panel">
</div>
</div>

#parent {
    display: table-cell;
    vertical-align: bottom;
    background: #ccc;
    height: 300px;
}
#box
{
    display:block;
    height: 20px;
    width:200px;
    border: 1px solid #000;
    margin-top: 200px;
}
#panel
{
    display: none;
    width:200px;
    height:50px;
    border: 1px solid red;
}

(js toujours pareil)

Cette méthode sera plus simple pour positionner ensuite tes éléments (centrer le bouton) et contient moins de div(less is more).

D'accord, je ne me doutais pas que de mettre une hauteur à la div "parent" pourtant avec display: table-cell allait faire la différence. J'ai même encore des doutes sur son fonctionnement, je vais m'y penché de plus près pour l'avenir.

En tout cas, j'te remercie une nouvelle fois de ton aide !

Voici le lien vers JSFiddle pour ceux qui souhaitent voir le résultat final : http://jsfiddle.net/MisterHims/h7syo4mv/4/

Cordialement,
Modifié par Mister-Hims (26 Mar 2015 - 12:53)

Bonjour.

Je n'ai pas crè crè compris l'intérêt du "deuxième" slideToggle() :

$("#box").click(function(){
    $("#panel").slideToggle();
})

Suffit !?

Ah oui effectivement, bon c'est pas bien méchant. C'est une logique qui part d'une instruction ouvrir/fermer alors que le Toggle comprend déjà les deux termes.
Modifié par Mister-Hims (26 Mar 2015 - 13:06)

Bonjour,

Je reviens pour vous demander une nouvelle fois de l'aide à l'aboutissement de mon fameux panneau ...

Il se trouve que plusieurs panneaux seront présents dans ma page, du coup, mes panneaux s'ouvrent tous simultanément (voir : http://www.arnaud-benez.net/filters_column/achat_express_for_gwen.html)

J'ai donc opter pour un nouveau code Jquery trouvé quelque part sur le web afin d'appliquer l'ouverture de mon panneau seulement à celui sur lequel l'internaute interagit.

Toutefois, mon bloc du dessus se retrouve de nouveau en seconde position (soit en dessous) dû au code Jquery (j'ai tenter de permuter mes 2 blocs mais mon script devient alors erroné).

Vous trouverez un lien JSFiddle par là : http://jsfiddle.net/MisterHims/Lc7nd5do/

Merci encore pour votre attention,

Cordialement,