Hide/Show div/td

NdinhC
Les bases HTML/CSS

Bonjour,
je souhaiterai créer un petit bouton qui me permettrait de faire apparaître disparaitre une div ou un td de ma page tout en redimensionnant la partie de gauche du coup. Je pense que ça doit se faire avec un truc du genre Display none onclick machin, je suis une quiche en code.

En image :
Avant :

Après avoir cliqué sur le machin rouge :

Merci pour votre aide ! :D

6 réponses

SLK
Réponse acceptée

Non pas vraiment, moi je regarde toujours sur w3schools pour du CSS.
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3schools.com/css/css3_transitions.asp

Par contre, un bouton ça se voit, l'utilisateur voit bien qu'on peut cliquer dessus.
Si tu n'utilises pas de bouton, et que tu cache la div au départ,
penses bien à laisser une "indication", un "truc visuel", qui montre à l'utilisateur qu'il peut faire apparaître quelque chose ici.

SLK
Réponse acceptée

Dans l'exemple que tu m'as montré,
il suffit simplement d'ajouter ça :

div:hover {
    display: block;
}
SLK

Salut,

Si tu veux "cliquer sur un bouton", tu ne vas pas pouvoir le faire en CSS, il faut utiliser du javaScript.
Display none onclick machin
Oui voilà, continue dans cette voie.
Une idée pour "remplacer" le "display: none" serait de lui donner une "position" et de décaler la div sur la droite pour la sortir de l'écran.
Au clic du bouton, tu la ramène sur la gauche pour la faire rentrer dans l'écran.

Je ne comprend pas bien ce qu'est la partie bleue, est-ce que c'est un menu latéral ?
Si oui, si tu veux éviter le javascript, on peut s'en sortir en CSS.
Dans ce cas, on ne va pas "cliquer" pour afficher la div, on va la "survoler" à la souri.
Au départ, tu lui donne une largeur de 40px, opacité à 0. Et au ":hover" tu lui donne sa vraie largeur, avec une opacité à 1.
Le tout en utilisant les "transition".

Essaies de commencer, et reviens si tu as une question sur un problème précis.

NdinhC
Auteur

La partie bleue est encore plus simple qu'un menu latéral, il s'agira en fait d'un embed de t'chat pour un portail de streaming donc autrement dit, une simple div sans se soucier du contenu :D Et le fait d'utiliser le hover sera encore mieux et plus intuitif :D Je vais me documenter sur le changement de la css sur du :hover ; à moins que tu ai un peu de documentation à me fournir la ^^

Merci en tout cas :D

NdinhC
Auteur

Parfait ! Je te remercie :) Dernier point, dans cet exemple : http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover2

Comment faire en sorte que la div reste visible lorsque la souris est par dessus cette dernière ? Car dans le cas présent, elle disparaît dès lors que l'on quitte le hover-me.

NdinhC
Auteur

Parfait ;)