Div,show,hide toggle. with changing link Color

Question

Hey , I tried to make a hide/show toogle for my site. And change the link color.

I know the prob is the input. The linkcolor goes on the divs. Not on the link.

Maybe anybody have an good idea. Think i need a new function. (jquery is on) maybe a shorter way is possible.

Thanks in advance!

//javascipt

          function toggleMe(a){
      var e=document.getElementById(a);
      var col=document.getElementById(a);
      if(!e)return true;
      if(e.style.display=="none"){
        e.style.display="block"
        col.style.color="#000000"     
      } else {
        e.style.display="none"
     col.style.color="#000000"
      }
      return true;
    }

//input 

  <div id="topp">

        <div id="tops">

             <li> <a href="www.google" target="_self">Serien</a></li>
                 <li>Architektur</li>
              <li >Portrait</li>
              <li><a href=# onclick="return toggleMe('about')">About Me</a></li>
                <li><a href=#  onclick="return toggleMe('kont')">Kontakt</a></li>
      <li><a href=#  onclick="return toggleMe('imp')">Impressum</a></li>
             <lie><span class="Stil1">Su</span>terrain.de</li></div>

                 </div>     
          </div>
//divs

         <div id="about" style="display:none" onclick="hideBox('about');">
    Lutz Bartelt<br />
    About

         </div>



         <div id="kont" style="display:none" onclick="hideBox('kont');">
    Lutz Bartelt<br />
 <br />
    01522386174<br />
    WhiteWall<br />



     </div>


         <div id="imp" style="display:none" onclick="hideBox('imp');">
    impress
     </div>

Answer 1

Well, I've adapted your html:

<div id="tops">
    <ul>
        <li><a href="www.google" target="_self">Serien</a></li>
        <li>Architektur</li>
        <li>Portrait</li>
        <li><a href="#" name="about">About Me</a></li>
        <li><a href="#" name="kontakt">Kontakt</a></li>
        <li><a href="#" name="impressum">Impressum</a></li>
        <li><span class="Stil1">Su</span>terrain.de</li>
    </ul>
</div>
<div id="panels">
    <div id="about">
        Lutz Bartelt<br />
        About
    </div>

    <div id="kontakt">
        Lutz Bartelt<br />
        <br />
        01522386174<br />
        WhiteWall<br />
    </div>

    <div id="impressum">
        impress
    </div>
</div>

And the following jQuery seems to do what I think you're trying to do:

$('#tops > ul > li > a').click(

function() {
    var showThis = $(this).attr('name');
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('#panels > div').hide();
    $('#' + showThis).show();
    return false;
});

I used an 'active' class-name for the color changing, which in the demo is defined in CSS as:

.active {
    color: #f00;
    font-weight: bold;
}

JS Fiddle demo of the above .

Answer 2

You forgot to pass the link object so there was no way for you to actually change the color of it:

function toggleMe( div, link )
{
  var e = document.getElementById( div );
  if( !e ) return( true );
  if( e.style.display == "none" )
  {
    e.style.display = "block";
    link.style.color = "red";
  }
  else
  {
    e.style.display = "none";
    link.style.color = "blue";
  }
  return( false );
}

<div id="topp">

            <div id="tops">

                 <li> <a href="www.google" target="_self">Serien</a></li>
                     <li>Architektur</li>
                  <li >Portrait</li>
                  <li><a href=# onclick="return toggleMe('about', this)">About Me</a></li>
                    <li><a href=#  onclick="return toggleMe('kont', this)">Kontakt</a></li>
          <li><a href=#  onclick="return toggleMe('imp', this)">Impressum</a></li>
                 <lie><span class="Stil1">Su</span>terrain.de</li></div>

                     </div>     
              </div>
    //divs

             <div id="about" style="display:none" onclick="hideBox('about');">
        Lutz Bartelt<br />
        About

             </div>



             <div id="kont" style="display:none" onclick="hideBox('kont');">
        Lutz Bartelt<br />
     <br />
        01522386174<br />
        WhiteWall<br />



         </div>


             <div id="imp" style="display:none" onclick="hideBox('imp');">
        impress
         </div>

Edit: You may also want to return false at the bottom of the function so the URL isn't actually followed.