Want to change div when click rounded image

Question

Can You help me with this obstacle please.

I have this site here and I want my red div to change when i click an rounded image.

I have copied the code from another website i have!

Here is the code for the section:

<div class="clearfix colelem" id="pu79"><!-- group -->
 <div class="browser_width grpelem" id="u79"><!-- group -->
  <div class="clearfix" id="u79_align_to_page">
   <a class="anchor_item grpelem" id="band"></a>
   <div class="clearfix grpelem" id="u80-4"><!-- content -->

   </div>
  </div>
 </div>
 <div class="PamphletWidget clearfix grpelem" id="pamphletu323"><!-- none box -->
  <div class="ThumbGroup clearfix grpelem" id="u324"><!-- none box -->
   <div class="popup_anchor">
    <div class="Thumb popup_element rounded-corners" id="u325"><!-- simple frame --></div>
   </div>
   <div class="popup_anchor">
    <div class="Thumb popup_element rounded-corners" id="u379"><!-- simple frame --></div>
   </div>
   <div class="popup_anchor">
    <div class="Thumb popup_element rounded-corners" id="u388"><!-- simple frame --></div>
   </div>
   <div class="popup_anchor">
    <div class="Thumb popup_element rounded-corners" id="u390"><!-- simple frame --></div>
   </div>
   <div class="popup_anchor">
    <div class="Thumb popup_element rounded-corners" id="u3911"><!-- simple frame --></div>
   </div>
  </div>
  <div class="popup_anchor" id="u328popup">
   <div class="ContainerGroup clearfix" id="u328"><!-- stack box -->
    <div class="Container clearfix grpelem" id="u330"><!-- group -->
     <div class="museBGSize grpelem" id="u348"><!-- simple frame --></div>
     <div class="clearfix grpelem" id="pu355-4"><!-- column -->
      <div class="clearfix colelem" id="u355-4"><!-- content -->
       <p>LORENZO-CRISTIAN</p>
      </div>
      <div class="clearfix colelem" id="u357-4"><!-- content -->
       <p>MAGICIAN-ILUZIONIST</p>
      </div>
      <div class="clearfix colelem" id="u356-4"><!-- content -->
       <p>Izvorul Inepuizabil de creatie artistica,  omul care mereu viseaza, planifica si duce visele la indeplinire.<br/>Realizatorul spectacolului, iluziilor si efectelor speciale…  </br/>The Master!</p>
      </div>
                            <a style="position:absolute;top:5px;right:-300px;" target="_blank" href="https://www.facebook.com/MagicianulLorenzoCristian?ref=hl"><div class="rounded-corners grpelem" id="u1044"><!-- simple frame --></div></a>

      <div class="clearfix colelem" id="pu358"><!-- group -->
      </div>
     </div>
    </div>
    <div class="Container invi clearfix grpelem" id="u380"><!-- group -->
     <div class="museBGSize grpelem" id="u392"><!-- simple frame --></div>
     <div class="clearfix grpelem" id="pu393-4"><!-- column -->
      <div class="clearfix colelem" id="u393-4"><!-- content -->
       <p>ANGELINA</p>
      </div>
      <div class="clearfix colelem" id="u395-4"><!-- content -->
       <p>ASISTENTA</p>
      </div>
      <div class="clearfix colelem" id="u394-4"><!-- content -->
       <p>Arta de a se lasa fotografiata… e ceva nativ pentru ea. Scena si lumina reflectoarelor lucesc mai tare dupa aparitia ei misterioasa. VISUL MEU o incadreaza intr-o poveste de dragoste nemaivazuta, alaturi de magician.</p>
      </div>
                            <a style="position:absolute;top:5px;right:-300px;" target="_blank" href="https://www.facebook.com/pages/Magic-Aly/1408354842777607?fref=ts"><div class="rounded-corners grpelem" id="u1044"><!-- simple frame --></div></a>

      <div class="clearfix colelem" id="pu396"><!-- group -->
      </div>
     </div>
    </div>
    <div class="Container invi clearfix grpelem" id="u389"><!-- group -->
     <div class="museBGSize grpelem" id="u399"><!-- simple frame --></div>
     <div class="clearfix grpelem" id="pu400-4"><!-- column -->
      <div class="clearfix colelem" id="u400-4"><!-- content -->
       <p>AN'TONIKA</p>
      </div>
      <div class="clearfix colelem" id="u402-4"><!-- content -->
       <p>ALL-IN-ONE</p>
      </div>
      <div class="clearfix colelem" id="u401-4"><!-- content -->
          <p>Stie tot! face tot! iar personalitatea ei tonica o face de neinlocuit in echipa!<br/>Puterea ei o face sa ramana in picioare oricate responsabilitati i-ai atribuit:<br/>- backstage, artist, costume, make-up… orice!</p>
      </div>
                <a style="position:absolute;top:5px;right:-300px;" target="_blank" href="https://www.facebook.com/antonela.knigge?fref=ts"><div class="rounded-corners grpelem" id="u1044"><!-- simple frame --></div></a>

      <div class="clearfix colelem" id="pu403"><!-- group -->
      </div>
     </div>
    </div>
        <div class="Container invi clearfix grpelem" id="u391"><!-- group -->
         <div class="museBGSize grpelem" id="u407"><!-- simple frame --></div>
         <div class="clearfix grpelem" id="pu407-4"><!-- column -->
          <div class="clearfix colelem" id="u407-4"><!-- content -->
           <p>VANESSA</p>
          </div>
          <div class="clearfix colelem" id="u409-4"><!-- content -->
           <p>ASISTENTA</p>
          </div>
          <div class="clearfix colelem" id="u408-4"><!-- content -->
           <p>Prea pasionata de dans sportiv si street dance… a reusit sa faca performanta. Rasplata stand in diverse cupe si premii obtinute la Campionatele Nationale.<br/>In VISUL MEU are rolul de a levita si de a se lasa taiata in 3, de un spectator.</p>
          </div>
                                <a style="position:absolute;top:5px;right:-300px;" target="_blank" href="https://www.facebook.com/magicvanessa?fref=ts"><div class="rounded-corners grpelem" id="u1044"><!-- simple frame --></div></a>

          <div class="clearfix colelem" id="pu410"><!-- group -->
          </div>
         </div>
        </div>
        <div class="Container invi clearfix grpelem" id="u391"><!-- group -->
         <div class="museBGSize grpelem" id="u406"><!-- simple frame --></div>
         <div class="clearfix grpelem" id="pu407-4"><!-- column -->
          <div class="clearfix colelem" id="u407-4"><!-- content -->
           <p>ROBO</p>
          </div>
                                <a style="position:absolute;top:5px;right:-300px;" target="_blank" href="https://www.facebook.com/CristianNovac?fref=ts"><div class="rounded-corners grpelem" id="u1044"><!-- simple frame --></div></a>

          <div class="clearfix colelem" id="u409-4"><!-- content -->
           <p>DANSATOR</p>
          </div>
          <div class="clearfix colelem" id="u408-4"><!-- content -->
           <p>Recunoscut a fi cel mai original dansator de Electric Boogie, datorita inventarii unui stil propriu. Acest stil sincronizeaza perfect miscarile cu sistemele de lumini pe care s-i le construieste singur.  Mai mult are abilitatea de a juca orice rol pe care Lorenzo il gaseste.</p>
          </div>
          <div class="clearfix colelem" id="pu410"><!-- group -->
          </div>
         </div>
        </div>
   </div>
  </div>
 </div>
</div>

Link is broken? question is uncelar. "Want to change div" in what ? — Nalin Aggarwal, Aug 24 '16 at 16:59
Check this out: http://stackoverflow.com/questions/25735512/replace-div-content-onclick — Oncodeeater, Aug 24 '16 at 17:00

score 0 · Answer 1 · answered Aug 24 '16 at 19:37

There are many ways to do something like this. You can find lots of implementations in various libraries. Even Bootstrap has this functionality built into it.

That being said, I just cooked something custom up really quickly for you to view and play with. See the Fiddle example and click the red circles to see how they change the content below.

HTML:

<ul class="circles">
  <li class="circle active" data-toggle="1"></li>
  <li class="circle" data-toggle="2"></li>
  <li class="circle" data-toggle="3"></li>
  <li class="circle" data-toggle="4"></li>
  <li class="circle" data-toggle="5"></li>
</ul>

<ul class="boxes">
  <li class="box active" data-toggled-by="1">
    <h1>Box 1</h1>
  </li>
  <li class="box" data-toggled-by="2">
    <h1>Box 2</h1>
  </li>
  <li class="box" data-toggled-by="3">
    <h1>Box 3</h1>
  </li>
  <li class="box" data-toggled-by="4">
    <h1>Box 4</h1>
  </li>
  <li class="box" data-toggled-by="5">
    <h1>Box 5</h1>
  </li>
</ul>

CSS:

ul {
  list-style-type: none;
}

li.circle {
  display: inline-block;
  border: 2px solid red;
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50px;
  margin-right: 25px;
  -webkit-transition: opacity .15s ease-in-out;
  -moz-transition: opacity .15s ease-in-out;
  transition: opacity .15s ease-in-out;
  cursor: pointer;
}

li.circle:hover {
  opacity: .5;
}

li.circle.active {
  border-color: black;
}

li.box {
  width: 90%;
  display: none;
  background: white;
  height: 300px;
  display: none;
}

li.box.active {
  display: block;
}

JavaScript (jQuery):

$('.circle').click(function() {
    // De-activate previously active circle
    $('.circle.active').removeClass('active');

    // Activate clicked circle
    $(this).addClass('active');

    // Get toggle ID of clicked circle
    var toggleId = $(this).data('toggle');

    // De-activate previously active box
    $('.box.active').removeClass('active');

    // Activate box with corresponding toggle ID
    $('.box[data-toggled-by="' + toggleId + '"]').addClass('active');
});

Want to change div when click rounded image

1 Answers1