J.Doe J.Doe - 16 days ago 5
CSS Question

List change onclick

Hello stackoverflow community,
i am practicing html css on a psd that i have
now its the part where i click on a button and a list must change to its content
here is an image that may clarify things
http://prntscr.com/d9al1x
and here is my website link if you want to inspect elements www.sheetmulching.com/karios

here is my html

<div class="content_rightside">
<a id="spieler" href="javascript:;"><img src="images/spieler.png" style="display:inline-block;"></a>
<a id="gilde" href="javascript:;"><img src="images/gilde.png" style="display:inline-block;"></a>
<div class="playerslists">
<ul>
<li><a href="javascript:;"><span class="number">1</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">2</span><span class="playername">Spieler</span><span class="score"><img src="images/Shinsoo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">3</span><span class="playername">Spieler</span><span class="score"><img src="images/Jinno.png"></span></a></li>
<li><a href="javascript:;"><span class="number">4</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">5</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">6</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">7</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">8</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">9</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">10</span><span class="playername">Spieler</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
</ul>
</div>


<div class="guildlist" style="display:none;">
<ul>
<li><a href="javascript:;"><span class="number">1</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">2</span><span class="playername">Gilde</span><span class="score"><img src="images/Shinsoo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">3</span><span class="playername">Gilde</span><span class="score"><img src="images/Jinno.png"></span></a></li>
<li><a href="javascript:;"><span class="number">4</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">5</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">6</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">7</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">8</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">9</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
<li><a href="javascript:;"><span class="number">10</span><span class="playername">Gilde</span><span class="score"><img src="images/Chunjo.png"></span></a></li>
</ul>
</div>
<a href="javascript:;"><img src="images/alles.png"></a>
</div>

</div>


and my CSS

.content_rightside { width: 270px;
float: left;
margin-left: -10px;
margin-top:-550px;}

.playerslists{ font-family:"Times New Roman"; margin-top:5px; font-size:15px;}

.playerslists ul li{ margin:8px 0px; padding: 5px 10px; border-bottom:solid 1px transparent}
.playerslists ul li:hover{ background:#27304f; }
.playerslists .number{ float:left; margin-right: 15px; color:#FFFFFF; }
.playerslists .playername{ color:#FFFFFF; }
.playerslists .score{ float:right; color:#FFFFFF; margin-top:-10px;}
.playerslists a{ text-decoration:none;}


i think this can be done in jquery but i dont know enough about it !
when the spieler button clicked it should show the id playerlists
and when gilde button is clicked it should show gildelist
Thanks in advance.

Answer

You have to change the display-state of the elements. This can be done with pure JavaScript, no need for jQuery.

  1. Get both elements into your JavaScript. Note that the execution of the JavaScript file has to happen after the DOM content was loaded (Further information: https://developer.mozilla.org/de/docs/Web/Events/DOMContentLoaded).

    var playerList = document.getElementById ("playerslists");
    var guildList = document.getElementById ("guildlist");
    

    Note that currently, you are using classes. Change the elements from class="guildlist" to id="guildlist" (same for the player list).

  2. Now you have to write a function to change the display state you have set via CSS (style="display: none;"). For this, use a toggle-function:

    function toggleLists () {
      if (guildList.style.display == "none") {
        guidList.style.display = "block";
        playerList.style.display = "none";
      } else {
        guidList.style.display = "none";
        playerList.style.display = "block";
      }
    }
    
  3. Calling the above function will toggle between the two elements. Since you have two buttons, you may want to explicitly write two functions which do one toggle at a time, but above code should show you how to handle the basics.
  4. I've added the code you should use for single switches between the states. Use these functions to change one at a time. They apply the CSS styles to every element one at a time.

    function showPlayerList () {    
      playerList.style.display = "block"; 
      guildList.style.display = "none";  
    }
    
    function showGuildList () {   
      guildList.style.display = "block";  
      playerList.style.display = "none"; 
    }
    

    Those two functions toggle one at a time. Assign them to your buttons via the HTML-attribute onclick="showGuildList()" (same with the other one).

Enjoy.

Comments