Afficher/Masquer éléments DIV en javascript

Afficher/Masquer éléments DIV en javascript - Javascript/Node.js - Programmation

Marsh Posté le 08-12-2014 à 16:28:59    

Bonjour
 
J'utilise la méthode du code suivant pour afficher/masquer un éléments div sur ma page.
Maintenant j'aimerai pourvoir arriver sur cette page via un lien, par exemple lien d'une autre page qui pointerait sur le 1er éléments de ma liste (id=un) et qui activerai en même temps son contenu.
 
Est-ce faisable? Merci !
 
 

<script>
 var _hidediv = null;
 function showdiv(id) {
  if(_hidediv)
   _hidediv();
  var div = document.getElementById(id);
  div.style.display = 'block';
  _hidediv = function () { div.style.display = 'none'; };
 }
</script>
<div>  
    <div>
     <div>
            <h2>test</h2>
            <div id="un"><a onclick="showdiv('1er');" href="#">un</a></div>
            <div id="deux"><a onclick="showdiv('2em');" href="#">deux</a></div>
            <div id="trois"><a onclick="showdiv('3em');" href="#">trois</a></div>
            <div id="quatre"><a onclick="showdiv('4em');" href="#">quatre</a></div>
            <div id="cinq"><a onclick="showdiv('5em');" href="#">cinq</a></div>
        </div>
        <div>
            <div id="1er" style="display: none;">123</div>
            <div id="2em" style="display: none;">456</div>
            <div id="3em" style="display: none;">789</div>
            <div id="4em" style="display: none;">147</div>
            <div id="5em" style="display: none;">258</div>
         </div>
    </div>
</div>

Reply

Marsh Posté le 08-12-2014 à 16:28:59   

Reply

Marsh Posté le 08-12-2014 à 16:34:07    

Par PHP ou JS? Les deux sont possibles, juste qu'en JS faudra parser toi-même l'url.

Message cité 1 fois
Reply

Marsh Posté le 08-12-2014 à 16:36:10    

MaybeEijOrNot a écrit :

Par PHP ou JS? Les deux sont possibles, juste qu'en JS faudra parser toi-même l'url.


vous savez me montrer les 2 méthodes (php et js)?

Reply

Marsh Posté le 08-12-2014 à 17:20:10    

En PHP :
http://php.net/manual/fr/function.parse-url.php

Code :
  1. <?php
  2. var array = parse_url ( $_SERVER["REQUEST_URI"] );
  3. ?>
  4. <script>
  5. var _hidediv = null;
  6. function showdiv(id) {
  7.   if(_hidediv)
  8.    _hidediv();
  9.   var div = document.getElementById(id);
  10.   div.style.display = 'block';
  11.   _hidediv = function () { div.style.display = 'none'; };
  12. }
  13. </script>
  14. <div> 
  15.     <div>
  16.      <div>
  17.             <h2>test</h2>
  18.             <div id="un"><a onclick="showdiv('1er');" href="#">un</a></div>
  19.             <div id="deux"><a onclick="showdiv('2em');" href="#">deux</a></div>
  20.             <div id="trois"><a onclick="showdiv('3em');" href="#">trois</a></div>
  21.             <div id="quatre"><a onclick="showdiv('4em');" href="#">quatre</a></div>
  22.             <div id="cinq"><a onclick="showdiv('5em');" href="#">cinq</a></div>
  23.         </div>
  24.       <div>
  25.             <div id="1er" style="display: <?php echo (array["fragment"] == "1er" ? "block" : "none" ); ?> ;">123</div>
  26.             <div id="2em" style="display: <?php echo (array["fragment"] == "2em" ? "block" : "none" );;">456</div>
  27.             <div id="3em" style="display: <?php echo (array["fragment"] == "3em" ? "block" : "none" );;">789</div>
  28.             <div id="4em" style="display: <?php echo (array["fragment"] == "4em" ? "block" : "none" );;">147</div>
  29.             <div id="5em" style="display: <?php echo (array["fragment"] == "5em" ? "block" : "none" );;">258</div>
  30.         </div>
  31.     </div>
  32. </div>


 
En javascript :

Code :
  1. <script>
  2.     function parseURL(url) {
  3.         var parser = document.createElement('a'),
  4.             searchObject = {},
  5.             queries, split, i;
  6.         // Let the browser do the work
  7.         parser.href = url;
  8.         // Convert query string to object
  9.         queries = parser.search.replace(/^\?/, '').split('&');
  10.         for( i = 0; i < queries.length; i++ ) {
  11.             split = queries[i].split('=');
  12.             searchObject[split[0]] = split[1];
  13.         }
  14.         return {
  15.             protocol: parser.protocol,
  16.             host: parser.host,
  17.             hostname: parser.hostname,
  18.             port: parser.port,
  19.             pathname: parser.pathname,
  20.             search: parser.search,
  21.             searchObject: searchObject,
  22.             hash: parser.hash
  23.         };
  24.     }
  25. var _hidediv = null;
  26. function showdiv(id) {
  27.   if(_hidediv)
  28.    _hidediv();
  29.   var div = document.getElementById(id);
  30.   div.style.display = 'block';
  31.   _hidediv = function () { div.style.display = 'none'; };
  32. }
  34. showdiv ( parseURL(document.URL).hash );
  36. </script>


 
J'ai rien testé mais ca devrait etre ca


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 08-12-2014 à 19:15:16    

Oui ça devrait être bon, juste quelques erreurs de frappe dans la fermeture des balises de php. Autrement je pensais passer plus simplement par la variable $_GET.
 
 
Par contre du côté js pour afficher/cacher je te conseille de passer par des class css et au lieu de stocker l'état de l'objet dans une variable, tu ferais mieux d'interroger à chaque fois son état et d'appliquer son contraire.
 
 
 
exemple en js :
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8"></meta>
  5.  <title>Page d'essai</title>
  6.  <style type="text/css">
  7.   .show {
  8.    display: block;
  9.   }
  10.   .hide {
  11.    display: none;
  12.   }
  13.  </style>
  14.  <script type="text/javascript">
  15.   function getQueryVariable(variable) {
  16.    var query = window.location.search.substring(1);
  17.    var vars = query.split("&" );
  18.    for (var i=0;i<vars.length;i++) {
  19.     var pair = vars[i].split("=" );
  20.     if (pair[0] == variable) {
  21.      return pair[1];
  22.     }
  23.    }
  24.   }
  25.   function ShowHide(id) {
  26.    if (id != '') {
  27.     var el = document.getElementById(id);
  28.     if (el.className == 'hide') {
  29.      el.className = 'show';
  30.     } else {
  31.      el.className = 'hide';
  32.     }
  33.    }
  34.   }
  35.  </script>
  36. </head>
  37. <body onLoad="ShowHide(getQueryVariable('id'));">
  38.  <a onClick="ShowHide('container');">click me</a>
  39.  <div class="hide" id="container">
  40.   test
  41.  </div>
  42. </body>
  43. </html>


Message édité par MaybeEijOrNot le 08-12-2014 à 19:38:39
Reply

Marsh Posté le 09-12-2014 à 11:39:56    

Merci pour vos réponses, je vais tester tout ça! :)

Reply

Marsh Posté le 09-12-2014 à 11:48:24    

Merci MaybeEijOrNot :)  
 
juste pour chippoter, on peut simplement definir une seul classe css.
.hide { display: none; }
 
et utiliser el.classList.toggle("hide" );
 
Mais bon, il y a d'autre amélioration a faire ^^'
 
So :

Code :
  1. <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.      <meta charset="UTF-8"></meta>
  5.      <title>Page d'essai</title>
  6.      <style type="text/css">
  7.       .hide {
  8.        display: none;
  9.       }
  10.      </style>
  11.      <script type="text/javascript">
  12.       function getQueryVariable(variable) {
  13.        var query = window.location.search.substring(1);
  14.        var vars = query.split("&" );
  15.        for (var i=0;i<vars.length;i++) {
  16.         var pair = vars[i].split("=" );
  17.         if (pair[0] == variable) {
  18.          return pair[1];
  19.         }
  20.        }
  21.       }
  23.       function ShowHide(id) {
  24.        if (id != '') {
  25.          document.getElementById(id).classList.toggle("hide" )';
  26.        }
  27.       }
  28.      </script>
  29.     </head>
  30.     <body onLoad="ShowHide(getQueryVariable('id'));">
  31.      <a onClick="ShowHide('container');">click me</a>
  32.      <div class="hide" id="container">
  33.       test
  34.      </div>
  35.     </body>
  36.     </html>


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 09-12-2014 à 14:49:40    

Merci, finalement j'ai utilisé la variable $_GET
 
voici un des liens = "index.php?section=test&id=2em"
 

Code :
  1. <div>
  2.             <div id="1er" style="display: <?php echo (htmlspecialchars($_GET["id"]) == "1er" ? "block" : "none" ); ?>;">123</div>
  3.             <div id="2em" style="display: <?php echo (htmlspecialchars($_GET["id"]) == "2em" ? "block" : "none" ); ?>;">456</div>
  4.             <div id="3em" style="display: <?php echo (htmlspecialchars($_GET["id"]) == "3em" ? "block" : "none" ); ?>;">789</div>
  5.             <div id="4em" style="display: <?php echo (htmlspecialchars($_GET["id"]) == "4em" ? "block" : "none" ); ?>;">147</div>
  6.             <div id="5em" style="display: <?php echo (htmlspecialchars($_GET["id"]) == "5em" ? "block" : "none" ); ?>;">258</div>
  7. </div>

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed