Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    pretty hard probleme with my <div> ...

    I have 11 <div> on a page. At the start, they are all hidden. Each <div> got one button that i called: want to know more?. When you click on this button, the <div> show and the button change hes name for: close the window.

    All my <div> are also programmed so theres is only 1 oppened at a time. So if the <div1> is open, when you are going to click on the <div2>, the <div1> close.

    The probleme hapen when i click on a <div>. The <div> open and the name of the button change. But when i open an other <div>, the first one close BUT the button name stay: Close the window... witch is not good cause the <div> is already closed.

    this is my JS :
    Code:
    function switchDiv(n) {
       var id;
       var hide = 0;
       switch(n) {
          case 1 : id = "div1"; break;
          case 2 : id = "div2"; break;
          case 3 : id = "div3"; break;
          case 4 : id = "div4"; break;
          case 5 : id = "div5"; break;
          case 6 : id = "div6"; break;
          case 7 : id = "div7"; break;
          case 8 : id = "div8"; break;
          case 9 : id = "div9"; break;
          case 10 : id = "div10"; break;
          case 11 : id = "div11"; break;
          }
       if ( document.getElementById(id).style.display == "block" ) hide = 1;
       document.getElementById('div1').style.display = "none";
       document.getElementById('div2').style.display = "none";
       document.getElementById('div3').style.display = "none";
       document.getElementById('div4').style.display = "none";
       document.getElementById('div5').style.display = "none";
       document.getElementById('div6').style.display = "none";
       document.getElementById('div7').style.display = "none";
       document.getElementById('div8').style.display = "none";
       document.getElementById('div9').style.display = "none";
       document.getElementById('div10').style.display = "none";
       document.getElementById('div11').style.display = "none";
       if ( hide != 1 ) document.getElementById(id).style.display = "block";
       }
     
    oldTextAry = new Array();
     
    function changeText (fieldObj, newTexStr) {
    if (newTexStr == fieldObj.innerHTML) {
    fieldObj.innerHTML = oldTextAry[fieldObj.id];
    } else {
    oldTextAry[fieldObj.id] = fieldObj.innerHTML;
    fieldObj.innerHTML = newTexStr;
    }
    }
    and my HTML :
    Code:
    <p class="choix">Carrière</p>
    	<div id="div1" style="display: none;">
    	</div>
    	<p class="savoir_plus"><a id="ferme_fenetre" href="#div1" onclick="switchDiv(1);changeText(this,'« Réduire fenêtre'); "><i>En savoir plus?</i></a></p>
    Thanks for your help ...

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,233
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    Maybe like this?
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .onOff {
        display: none;
        position: relative;
        width: 50%;
        border-color: solid blue 2px;
        background-color: lightblue;
    }   
    .savoir_plus a {
        font-size: medium;
        font-style: italic;
        cursor: pointer;
    }
    </style>
    </head>
    <body>
    <div>
    <p class="choix">Carrière</p>
    
    <div id="div1" class="onOff">This is div1</div>
    <p class="savoir_plus">
        <a id="_div1">En savoir plus?</a>
    </p>
    <div id="div2" class="onOff">div2 div2 div2 div2</div>
    <p class="savoir_plus">
        <a id="_div2">En savoir plus?</a>
    </p>
    <div id="div3" class="onOff">3 3 3 3 3 3 3 3 3 3 3 3</div>
    <p class="savoir_plus">
        <a id="_div3">En savoir plus?</a>
    </p>
    
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          var links = document.getElementsByTagName("a");
          for ( var i = 0; i < links.length; ++i )
          {
              var link = links[i];
              if ( link.id.substring(0,4) === "_div" )
              {
                  link.onclick = changeDiv;
              }
          }
          var priorLink = null;
          function changeDiv( )
          {
              if ( priorLink == this )
              {
                  // if same link clicked on again, just turn it back off
                  this.innerHTML = "En savoir plus?";
                  document.getElementById(this.id.substring(1)).style.display = "none";
                  priorLink = null;
                  return;
              }
              // in all other cases, turn off all divs...
              for ( var i = 0; i < links.length; ++i )
              {
                  var link = links[i];
                  if ( link.id.substring(0,4) === "_div" )
                  {
                      var div = document.getElementById(link.id.substring(1));
                      div.style.display = ( link == this ) ? "block" : "none";
                      link.innerHTML = "En savoir plus?";
                  }
              }
              this.innerHTML = "« Réduire fenêtre";
              priorLink = this;
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks that helped me alot !!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •