Partage
  • Partager sur Facebook
  • Partager sur Twitter

Affichage Dynamique CSS Pure

    12 décembre 2014 à 1:58:00

    Bonjou, bonsoir la communautée

    Je me tourne encore vers vous afin de vous poser une question qui me turlupine.

    Je vais essayer d'exposer ceci au mieux...

    Le code suivant 

    <div class="partie-1">
      <p>blablabla</p>
    </div>
    <div class="partie-2">
      <p>blablabla</p>
    </div>
    <div class="partie-1">
      <p>blablabla</p>
    </div>
    <div class="partie-2">
      <p>blablabla</p>
    </div>
    <div class="partie-3">
      <p>blablabla</p>
    </div>
    <div class="partie-3">
      <p>blablabla</p>
    </div>

    Imaginez avec ce code, une partie où sélectionner les parties a afficher ( checkbox, liste déroulante, ou n'importe quoi d'autres...)

    Le but recherchez de tout ça, serait pour l'utilisateur, d'afficher uniquement les parties sélectionnées.

    Pensez vous, que ceci serait réalisable uniquement en CSS/HTML ? Si oui, avez vous une idée de comment ? 

    Enn vous remerciant par avance !

    • Partager sur Facebook
    • Partager sur Twitter
      12 décembre 2014 à 9:02:51

      Salut,

      c'est possible mais pas durable.

      Quand le visiteur va quitter ton site et revenir la configuration sera perdue.

      A moins d'utiliser un cookie (ou d'enregistrer les choix dans une base avec un langage serveur).

      Tout dépends de ton souhait.

      • Partager sur Facebook
      • Partager sur Twitter
      Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
        12 décembre 2014 à 15:44:26

        Que ce ne soit pas durable ce n'est absolument pas grave, c'est peut être même mieux ainsi .

        Si tu peux donc m'indiquer le chemina suivre, ce serait fort sympathique :)

        • Partager sur Facebook
        • Partager sur Twitter
          12 décembre 2014 à 16:47:25

          Bonsoir,

          Tu peux faire comme ceci en enrobant tes div dans des label:

          <label for="chk1">
          <input type="checkbox" name="menu" id="chk1">
          <div class="partie-1">
          	<p>blablabla</p>
          </div>
          </label>
          <label for="chk2">
          <input type="checkbox" name="menu" id="chk2">
          <div class="partie-2">
          	<p>blablabla</p>
          </div>
          </label>

          CSS

          input{display:none;}
          
          div{
            border:5px ridge grey;
            width:150px;
            height:50px;
          }
          
          input:checked ~ div {height:150px;}

          http://jsbin.com/yinijolopa/2/edit

          Tu peux supprimer la ligne 1 si tu souhaites faire apparaître les cases à cocher.


          • Partager sur Facebook
          • Partager sur Twitter
          "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
            12 décembre 2014 à 18:47:25

            Je pense m'etre mal exprimer au niveau que je cherche à faire,

            dans le code suivant

            http://jsbin.com/hujupetofi/1/

            en cochant la box chat par exemple, ça cacherait entièrement toutes les divs ayant pour id "chat" tout en laissant les autres divs visible et vice versa 

            Je connaissais déjà plus ou moins vos techniques, mais ca ne correspond pas tout a fait au résultat souhaitez, ou alors je n'arive peut etre pas a les adapter

            -
            Edité par Crazyweedz 12 décembre 2014 à 18:48:16

            • Partager sur Facebook
            • Partager sur Twitter
              12 décembre 2014 à 20:02:05

              ça commence mal... ^^
              un id est unique, il ne peut y avoir qu'un seul id avec le même nom dans une page

              Donc commence par mettre des classes.

              Ensuite, la solution t'a été donnée par philiga avec le sélecteur d'adjacence ~

              -
              Edité par Frogweb 12 décembre 2014 à 20:02:54

              • Partager sur Facebook
              • Partager sur Twitter
              Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
                12 décembre 2014 à 22:46:30

                Voici un double exemple avec au choix:

                • des options cumulables (utilisant input et checked)
                • des options automatiquement exclusives (avec des ancres et :target):

                http://jsbin.com/wazoketowa/2/edit

                 <input type="checkbox" name="chat" id="chat">Chat
                  <input type="checkbox" name="chien" id="chien">Chien
                  <input type="checkbox" name="ours" id="ours">Ours
                  <br>
                  <br>
                  <a href="#AUCUN" id="AUCUN">AUCUN</a>
                  <a href="#chat_ONLY" id="chat_ONLY">Chat_ONLY</a>
                  <a href="#chien_ONLY" id="chien_ONLY">Chien_ONLY</a>
                  <a href="#ours_ONLY" id="ours_ONLY">Ours_ONLY</a>
                <br>
                <br>
                
                <div class="chat">
                  <p>Chat</p>
                </div>
                
                <div class="chien">
                  <p>Chien</p>
                </div>
                
                <div class="ours">
                  <p>Ours</p>
                </div>
                <div class="chat">
                  <p>Chat</p>
                </div>
                
                <div class="chien">
                  <p>Chien</p>
                </div>
                
                <div class="ours">
                  <p>Ours</p>
                </div>
                <div class="chat">
                  <p>Chat</p>
                </div>
                
                <div class="chien">
                  <p>Chien</p>
                </div>
                
                <div class="ours">
                  <p>Ours</p>
                </div>

                CSS

                div{
                  border:5px ridge grey;
                  width:120px;
                  height:40px;
                }
                
                /*** Options cumulables ***/
                #chat:checked ~ div.chat{height:100px;color:red;}
                #chien:checked ~ div.chien{height:100px;color:red;}
                #ours:checked ~ div.ours{height:100px;color:red;}
                
                
                
                /*** Options exclusives ***/
                #chat_ONLY:target ~ div.chat{height:100px;color:blue;}
                #chien_ONLY:target ~ div.chien{height:100px;color:blue;}
                #ours_ONLY:target ~ div.ours{height:100px;color:blue;}
                
                
                a{border:3px ridge grey;}




                • Partager sur Facebook
                • Partager sur Twitter
                "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)

                Affichage Dynamique CSS Pure

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur
                • Markdown