Je suis entrain de créer un petite site en HTML/CSS (pas de PHP pour l'instant mais si c'est nécéssaire c'est possible), et j'ai quelques idées en tête:
La première c'était de créer des boutons qui renvoie vers une page (rien de compliqué en soit et j'ai réussi à le faire fonctionner) ;
ou faire des genre d'onglets, qui contiendrait du contenu et que je pourrais ouvrir et fermer en cliquant dessus.
Pour cette dernière option je sais pas comment rentre l'élément cliquable, ni si c'est + judicieux de faire ça avec un div et le contenu dedans, ou alors créer une 2eme page .html et utiliser un iframe...
J'espère que j'ai été assez clair merci d'avance pour votre aide
Merci pour la réponse, je me doutais que je devrais partir sur dur JS.
J'avais trouvé un bout de code qui fonctionnait plus ou moins comme je voulais, mais ça se présentait toujours sous forme de bouton.. le voici :
<input onclick="cache('aCacher')" type="submit" value="cacher"/>
<div id="aCacher">
<p>CACHER CE TEXTE</p></div>
<script>
var bool=true;
function cache(id){
if(bool==true){
document.getElementById(id).style.display='none';
bool=false;
}else{
document.getElementById(id).style.display='block';
bool=true;
}
}
</script>
ça se met sous forme d'un bouton "windows" en fait (enfin selon l'OS ça change quoi), moi par exemple j'aimerais bien que ça soit un titre et je sais pas quoi changer, j'ai pensé que ça pourrait être l'input mais il s'avère que non
En plus, c'est bien plus réutilisable et modulaire comme ça.
J'ai essayé et ça ne marche pas quand je clique sur le lien ben rien ne se passe. Par contre avec le code de Xia :
Xia a écrit:
bycyx77 a écrit:
moi par exemple j'aimerais bien que ça soit un titre et je sais pas quoi changer, j'ai pensé que ça pourrait être l'input mais il s'avère que non
Si. Il faut juste donner le bon ID et ça doit fonctionner (voir en live).
Par contre, si tu veux le faire sur plusieurs éléments différents, ce script ne pourra pas fonctionner. il faut plutôt prendre quelque chose comme ça
Note: le code javascript est visible pour les deux exemples dans script.js
ça fonctionne bien, merci ! le seul soucis que j'ai maintenant c'est que j'arrive pas à faire le lien entre le css et le div, en gros j'aimerais mettre une transition comme dans le code de Manu mais ça ne marche pas
c'est parce que le transitions sont plus compatibles sur les nouveaux navigateurs ? il me semble que j'ai déjà été confronté avec ce problème et que ces attributs étaient exclusifs a IE..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SnFR Tournament
</title>
<meta name="description" content="Classement du SnFR Tournament.">
<link rel="stylesheet" href="css/test2.css">
<script>src = "test.js"</script>
</head>
<body>
<br>
<div class="yo"></div>
<h2>Page de test</h2>
<a href="#mon-bloc-1" data-js="hide">Open box 1</a>
<div id="mon-bloc-1" class="hide-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus aliquid culpa officia asperiores aliquam porro, animi totam, qui tenetur eos. Explicabo id omnis a dolorum, eos commodi deserunt porro aspernatur?</div>
<a href="#mon-bloc-2" data-js="hide">Open box 2</a>
<div id="mon-bloc-2" class="hide-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum itaque vel incidunt ea nostrum accusantium officia veritatis, ex, atque sunt voluptas minus sint mollitia nihil facilis a tempora repellendus? Doloremque!</div>
et le javascript :
let hiders = document.querySelectorAll('[data-js="hide"]');
Array.prototype.forEach.call(hiders, function (hider) {
let hiderID = hider.getAttribute('href');
let hiderTarget = document.querySelector(hiderID);
hider.addEventListener('click', function (event) {
event.preventDefault();
hiderTarget.classList.toggle('-visible');
});
});
j'utilise Brackets.io pour mon code et il me dit qu'il y a une erreur de syntaxe dans la première fonction (let ...) ou quelque chose comme ça.. :/ Je crois que ça vient de la
Petite question concernant ce script. Ca fonctionne très bien mais j'aimerai que au lieu que les div soit ouverte a l'arrivée sur la page, j'aimerai qu'elle soit fermée ... est ce que c'est possible
Bonjour. On est sur un forum JS, mais ouvrir et fermer un élément, surtout depuis CSS3, qui ajoute des transitions ne nécessite plus JS.Essayez ceci qui un exemple parmi d'autres
<!DOCTYPE HTML>
<head>
<style>
#d{
max-height : 1.2em;
border: 1px solid;
overflow: hidden;
transition: all 0.4s
}
#d:hover {
max-height: 5em;
}
</style>
</head>
<body>
<div id=d>
Ouvrir<br>
ligne 1<br>
ligne 2<br>
ligne 3<br>
</div>
Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.
Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre. En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.
Au lieu de déterrer un sujet il est préférable :
soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
soit de créer un nouveau sujet décrivant votre propre contexte
ne pas répondre à un déterrage et le signaler à la modération
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Pas d'aide concernant le code par MP, le forum est là pour ça :)