javascript - Swap over div content on click -

i know has been asked plenty of times after reading several threads cannot seem right combination of html / css , js happening desired effect happening panel , feel going around in circles.

i think have set html correctly divs hidden think css , js problems because cant swap on when li icons clicked.

situation: have horizontal timeline has 4 points want act clickable elements, , depending on point clicked determine hidden content panel shown.

• div 1 content shown default
• click on pt 2 , div 2 content shown
• click on pt 3 , div 3 content shown
• click on pt 4 , div 4 content shown

also not sure how timeline on 1 continuous line. working fine li wrapped in link went skewif.

any help, tips or pointers on how work appreciated.

cheers.. brett

html

<div id="content">     <div id="icon">         <img src="http://www.arteria-glh.com/wp-content/uploads/2015/07/design-centre.png">     </div>     <div id="copy">         <h3>design centre content #1</h3>         <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. nulla consequat massa quis enim. donec pede justo, fringilla vel, aliquet nec, vulputate </p>     </div> </div> <div id="content-2" class="hidden">     <div id="icon">         <img src="http://www.arteria-glh.com/wp-content/uploads/2015/07/design-centre.png">     </div>     <div id="copy">         <h3>design centre content #2</h3>         <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. nulla consequat massa quis enim. donec pede justo, fringilla vel, aliquet nec, vulputate </p>     </div> </div> <div id="content-3" class="hidden">     <div id="icon">         <img src="http://www.arteria-glh.com/wp-content/uploads/2015/07/design-centre.png">     </div>     <div id="copy">         <h3>design centre content #3</h3>         <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. nulla consequat massa quis enim. donec pede justo, fringilla vel, aliquet nec, vulputate </p>     </div> </div> <div id="content-4" class="hidden">     <div id="icon">         <img src="http://www.arteria-glh.com/wp-content/uploads/2015/07/design-centre.png">     </div>     <div id="copy">         <h3>design centre content #4</h3>         <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. nulla consequat massa quis enim. donec pede justo, fringilla vel, aliquet nec, vulputate </p>     </div> </div> 

css

ol.progtrckr {     display: table;     list-style-type: none;     margin: 0;     padding: 0;     table-layout: fixed;     width: 100%; }  ol.progtrckr li {     display: table-cell;     text-align: center;     line-height: 3em; }  ol.progtrckr[data-progtrckr-steps="4"] li {      width: 25%;  }  ol.progtrckr li.progtrckr-done {     color: #414042;     font-family: open sans;     font-weight: 900;     font-size: 30px;     border-bottom: 4px solid #517316; }  ol.progtrckr li.progtrckr-todo {     color: #fafafa;      font-family: open sans;     font-weight: 900;     font-size: 30px;     border-bottom: 4px solid #afdf5d; }  ol.progtrckr li:before {     position: relative;     bottom: -2.5em;     float: left;     left: 50%;     line-height: 1em; }  ol.progtrckr li.progtrckr-done:before {     content: "◉";     color: #afdf5d;     font-size: 1.5em;     bottom: -0.6em; }  ol.progtrckr li.progtrckr-todo:before {     content: "◉";     color: #dff6b8;     font-size: 1.5em;     bottom: -0.6em; }  #content {     margin-top: 50px;     margin-left: 15%; }  #content-2 {     margin-top: 50px;     margin-left: 15%; }  #content-3 {    margin-top: 50px;    margin-left: 15%; }  #content-4 {     margin-top: 50px;     margin-left: 15%; }  img {     display: block;     margin-left: auto;     margin-right: auto; }  div#icon {     width: 15%;     float: left; }  div#copy {     margin-left: 20%;     margin-right: 20%;     border-radius: 8px;     padding-bottom: 20px }  h3 {     padding-top: 10px;     padding-left: 10px;     color: #78a22f;     size: 24px; }  p {     padding-left: 10px;     padding-right: 10px;     padding-top: 10px;     color: #fafafa; }  .hidden {     display: none; } 

js

$("div.containter ul li").each(function(){ $(this).onclick(function(){     $("div.content").hide();    $("div" + $(this).attr("href")).show();  }); }); 

please try this

i have made html changes. id's unique, there should not duplicate id's.

$(".progtrckr a").click(function(){     var currentdiv = $(this).attr("href");     $('.data').each(function(){         if(! $(this).hasclass('hidden')){             $(this).addclass('hidden')         }     });     $(''+currentdiv+'').removeclass('hidden');  }); 

demo