CODEWITHSUNDEEP
javascripthtmlcss
AAP
AAP

Reputation: 13

How can I swap an image with another, after it has been clicked?

Some background of what I am trying to do:

I am making a page where there are 4 icons/imgs at the top and when each icon is clicked, certain content is displayed under it. The user can click on any of the icons to hide the current and show the content connected to the icon they click.

So far I've got that working, but now I am trying to have the icons change to another icon after being clicked, to show that certain content is active/showing on the page.

I've tried using onclick, but seeing as how I already have an onclick function, I wasn't sure how that would work.

Now I am stuck on how to proceed, any help is much appreciated.

Here is what I have so far:

Test Fiddle

function show(param_div_id) {
  document.getElementById('main_place').innerHTML = document.getElementById(param_div_id).innerHTML;
}

window.onload = function() {
  show('operation1');
}
#operation1,
#operation2,
#operation3,
#operation4 {
  display: none;
}

.div1 ul,
.div2 ul,
.div3 ul,
.div4 ul {
  padding-left: 25px;
  line-height: 2;
  font-weight: 600;
}

.div1 .container,
.div2 .container,
.div3 .container,
.div4 .container {
  padding-bottom: 4%;
}

.div1 a {
  border-left: 5px solid #BAC36A;
  padding-left: 10px;
  color: #214D29;
  font-weight: 600;
  margin-left: 8px;
}

#click_imgs h5 {
  color: #3D4643;
}

#image-one img,
#image-two img,
#image-three img,
#image-four img {
  transition: transform 0.5s;
}

#image-one img:hover,
#image-two img:hover,
#image-three img:hover,
#image-four img:hover {
  transform: scale(1.1);
}

#image-one img:active {
  background: url('https://www.wallisbank.com/wp-content/uploads/[email protected]') no-repeat center;
  background-size: 100% 100%;
}

#click_imgs h5 {
  padding-top: 20px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!---->

<div style="text-align: center; padding-bottom: 4%;">
  <div id="click_imgs" style="display: flex; padding-bottom: 20px; justify-content: space-between;">
    <div id="image-one"><img onclick="show('operation1')" src="https://via.placeholder.com/150x150.png?text=ICON+1" width="150" />
      <h5>ICON 1</h5>
    </div>
    <div id="image-two"><img onclick="show('operation2')" src="https://via.placeholder.com/150x150.png?text=ICON+2" width="150" />
      <h5>ICON 2</h5>
    </div>
    <div id="image-three"><img onclick="show('operation3')" src="https://via.placeholder.com/150x150.png?text=ICON+3" width="150" />
      <h5>ICON 3</h5>
    </div>
    <div id="image-four"><img onclick="show('operation4')" src="https://via.placeholder.com/150x150.png?text=ICON+4" width="150" />
      <h5>ICON 4</h5>
    </div>
  </div>
</div>

<hr>

<div id="main_place">
  main
</div>


<div id="operation1">
  <h1 class="360_sub_titles" style="color: #214D29;">
    CONTENT 1
  </h1>
  <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam
    elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin. Curabitur sit amet tortor id nisl tempus venenatis. Vivamus semper, dolor sed vulputate finibus, magna dui faucibus est, id finibus risus arcu in velit. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam mattis volutpat efficitur. Phasellus venenatis turpis nibh, auctor tincidunt diam dictum non. Vestibulum tincidunt interdum efficitur. Integer cursus aliquet blandit. Donec
    auctor augue vitae metus faucibus, ut semper felis egestas. Nunc eu mattis lacus, non fermentum mauris.
  </p>
  <div class="div1">
    <div>
      <div id="360-slide-1">
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 1</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Maecenas sagittis dui tempus, porttitor erat et</li>
                <li>Integer eleifend erat elit</li>
              </ul>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+1" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+2" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 2</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>Phasellus venenatis turpis nibh</li>
                <li>Curabitur sit amet tortor id nisl tempus venenatis</li>
                <li>Integer in ex nunc</li>
              </ul>
              <a href="#">LEARN MORE</a>

            </div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 3</h3>
              <ul style="color: #3d4643;">
                <li>Integer in ex nunc</li>
                <li>Curabitur sit amet tortor id nisl tempus venenatis</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Phasellus venenatis turpis nibh</li>
              </ul>
              <a href="#">LEARN MORE</a>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+3" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+4" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 4</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Maecenas sagittis dui tempus, porttitor erat et</li>
                <li>Integer eleifend erat elit</li>
              </ul>
              <a href="#">LEARN MORE</a>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="operation2">
  <h1 class="360_sub_titles" style="color: #214D29;">
    CONTENT 2
  </h1>
  <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam
    elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin. Curabitur sit amet tortor id nisl tempus venenatis. Vivamus semper, dolor sed vulputate finibus, magna dui faucibus est, id finibus risus arcu in velit. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  </p>
  <div class="div2">
    <div>
      <div id="360-slide-2">
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 1</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Maecenas sagittis dui tempus, porttitor erat et</li>
              </ul>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+1" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+2" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 2</h3>
              <ul style="color: #3d4643;">
                <li>Integer in ex nunc</li>
                <li>Curabitur sit amet tortor id nisl tempus venenatis</li>
                <li>Lorem ipsum dolor sit amet</li>
              </ul>
            </div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 3</h3>
              <ul style="color: #3d4643;">
                <li>Integer in ex nunc</li>
                <li>Curabitur sit amet tortor id nisl tempus venenatis</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Phasellus venenatis turpis nibh</li>
              </ul>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+3" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+4" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 4</h3>
              <ul style="color: #3d4643;">
                <li>Integer in ex nunc</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Phasellus venenatis turpis nibh</li>
              </ul>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="operation3">
  <h1 class="360_sub_titles" style="color: #214D29;">
    CONTENT 3
  </h1>
  <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam
    elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin.
  </p>
  <div class="div2">
    <div>
      <div id="360-slide-3">
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 1</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Maecenas sagittis dui tempus, porttitor erat et</li>
              </ul>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+1" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+2" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 2</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Integer eleifend erat elit</li>
              </ul>
            </div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 3</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Integer eleifend erat elit</li>
              </ul>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+3" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+4" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 4</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Maecenas sagittis dui tempus, porttitor erat et</li>
              </ul>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="operation4">
  <h1 class="360_sub_titles" style="color: #214D29;">
    CONTENT 4
  </h1>
  <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur.
  </p>
  <div class="div4">
    <div id="360-slide-4">
      <div class="container first-content">
        <div class="row">
          <div class="col">
            <h3 style="color: #214d29;">SUB-TITLE 1</h3>
            <ul style="color: #3d4643;">
              <li>Lorem ipsum dolor sit amet</li>
              <li>consectetur adipiscing elit</li>
            </ul>
          </div>
          <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+1" width="400" /></div>
        </div>
      </div>
      <!--BREAK-->
      <div class="container first-content">
        <div class="row">
          <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+2" width="400" /></div>
          <div class="col">
            <h3 style="color: #214d29;">SUB-TITLE 2</h3>
            <ul style="color: #3d4643;">
              <li>Lorem ipsum dolor sit amet</li>
              <li>consectetur adipiscing elit</li>
              <li>Maecenas sagittis dui tempus, porttitor erat et</li>
            </ul>
          </div>
        </div>
      </div>
      <!--BREAK-->
      <div class="container first-content">
        <div class="row">
          <div class="col">
            <h3 style="color: #214d29;">SUB-TITLE 3</h3>
            <ul style="color: #3d4643;">
              <li>Maecenas sagittis dui tempus, porttitor erat et</li>
              <li>Integer eleifend erat elit</li>
            </ul>
          </div>
          <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+3" width="400" /></div>
        </div>
      </div>
      <!--BREAK-->
      <div class="container first-content">
        <div class="row">
          <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+4" width="400" /></div>
          <div class="col">
            <h3 style="color: #214d29;">SUB-TITLE 4</h3>
            <ul style="color: #3d4643;">
              <li>Lorem ipsum dolor sit amet</li>
              <li>consectetur adipiscing elit</li>
              <li>Maecenas sagittis dui tempus, porttitor erat et</li>
            </ul>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 101

Answers (2)

Kinglish
Kinglish

Reputation: 23664

This illustrates one way of going about it. Use data-attributes to store information about the element. Then you don't need to hardcode logic into your script, as it's all available to you right there. For each of the image nav items, you can add these 3 data attributes:

<img data-clickref="operation1" 
     data-src="https://via.placeholder.com/150x150.png?text=ICON+1" 
     data-activesrc="https://via.placeholder.com/150x150.png?text=ICON+1+-CLICKED" 
     width="150" />

In the window.load listener, we cycle through these and set the src (notice it's missing) to be data-src. Then also attach the click listener in that same loop. The last line show() is passing a faux event object to be similar to what our function is expecting.

// set it all up
window.addEventListener('load', () => {
  document.querySelectorAll('img[data-clickref]').forEach(el => {
    // set up the initial image
    el.src = el.dataset.src
    el.addEventListener('click', show)
  })
  show({ target: document.querySelector('img[data-clickref]') });
})

Every time a nav item is clicked, we change out src with data-activesrc in the show(e) function. e represents the click event, and the item that was clicked is e.target and the HTML element we need to show is e.target.dataset.clickref

function show(e) {
  let param_div_id = e.target.dataset.clickref
  document.getElementById('main_place').innerHTML = document.getElementById(param_div_id).innerHTML;
  //reset all
  document.querySelectorAll('img[data-clickref]').forEach(el => el.src = el.dataset.src)
  e.target.src = e.target.dataset.activesrc;
}

window.addEventListener('load', () => {
  document.querySelectorAll('img[data-clickref]').forEach(el => {
    // set up the initial image
    el.src = el.dataset.src
    el.addEventListener('click', show)
  })
  show({
    target: document.querySelector('img[data-clickref]')
  });
})
#operation1,
#operation2,
#operation3,
#operation4 {
  display: none;
}

.div1 ul,
.div2 ul,
.div3 ul,
.div4 ul {
  padding-left: 25px;
  line-height: 2;
  font-weight: 600;
}

.div1 .container,
.div2 .container,
.div3 .container,
.div4 .container {
  padding-bottom: 4%;
}

.div1 a {
  border-left: 5px solid #BAC36A;
  padding-left: 10px;
  color: #214D29;
  font-weight: 600;
  margin-left: 8px;
}

#click_imgs h5 {
  color: #3D4643;
}

#image-one img,
#image-two img,
#image-three img,
#image-four img {
  transition: transform 0.5s;
}

#image-one img:hover,
#image-two img:hover,
#image-three img:hover,
#image-four img:hover {
  transform: scale(1.1);
}

#image-one img:active {
  background: url('https://www.wallisbank.com/wp-content/uploads/[email protected]') no-repeat center;
  background-size: 100% 100%;
}

#click_imgs h5 {
  padding-top: 20px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!---->

<div style="text-align: center; padding-bottom: 4%;">
  <div id="click_imgs" style="display: flex; padding-bottom: 20px; justify-content: space-between;">
    <div id="image-one"><img data-clickref="operation1" data-src="https://via.placeholder.com/150x150.png?text=ICON+1" data-activesrc="https://via.placeholder.com/150x150.png?text=ICON+1+-CLICKED" width="150" />
      <h5>ICON 1</h5>
    </div>
    <div id="image-two"><img data-clickref="operation2" data-src="https://via.placeholder.com/150x150.png?text=ICON+2" data-activesrc="https://via.placeholder.com/150x150.png?text=ICON+2+-CLICKED" width="150" />
      <h5>ICON 2</h5>
    </div>
    <div id="image-three"><img data-clickref="operation3" data-src="https://via.placeholder.com/150x150.png?text=ICON+3" data-activesrc="https://via.placeholder.com/150x150.png?text=ICON+3+-CLICKED" width="150" />
      <h5>ICON 3</h5>
    </div>
    <div id="image-four"><img data-clickref="operation4" data-src="https://via.placeholder.com/150x150.png?text=ICON+4" data-activesrc="https://via.placeholder.com/150x150.png?text=ICON+4+-CLICKED" width="150" />
      <h5>ICON 4</h5>
    </div>
  </div>
</div>

<hr>

<div id="main_place">
  main
</div>


<div id="operation1">
  <h1 class="360_sub_titles" style="color: #214D29;">
    CONTENT 1
  </h1>
  <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam
    elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin. Curabitur sit amet tortor id nisl tempus venenatis. Vivamus semper, dolor sed vulputate finibus, magna dui faucibus est, id finibus risus arcu in velit. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam mattis volutpat efficitur. Phasellus venenatis turpis nibh, auctor tincidunt diam dictum non. Vestibulum tincidunt interdum efficitur. Integer cursus aliquet blandit. Donec
    auctor augue vitae metus faucibus, ut semper felis egestas. Nunc eu mattis lacus, non fermentum mauris.
  </p>
  <div class="div1">
    <div>
      <div id="360-slide-1">
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 1</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Maecenas sagittis dui tempus, porttitor erat et</li>
                <li>Integer eleifend erat elit</li>
              </ul>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+1" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+2" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 2</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>Phasellus venenatis turpis nibh</li>
                <li>Curabitur sit amet tortor id nisl tempus venenatis</li>
                <li>Integer in ex nunc</li>
              </ul>
              <a href="#">LEARN MORE</a>

            </div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 3</h3>
              <ul style="color: #3d4643;">
                <li>Integer in ex nunc</li>
                <li>Curabitur sit amet tortor id nisl tempus venenatis</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Phasellus venenatis turpis nibh</li>
              </ul>
              <a href="#">LEARN MORE</a>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+3" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+4" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 4</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Maecenas sagittis dui tempus, porttitor erat et</li>
                <li>Integer eleifend erat elit</li>
              </ul>
              <a href="#">LEARN MORE</a>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="operation2">
  <h1 class="360_sub_titles" style="color: #214D29;">
    CONTENT 2
  </h1>
  <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam
    elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin. Curabitur sit amet tortor id nisl tempus venenatis. Vivamus semper, dolor sed vulputate finibus, magna dui faucibus est, id finibus risus arcu in velit. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  </p>
  <div class="div2">
    <div>
      <div id="360-slide-2">
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 1</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Maecenas sagittis dui tempus, porttitor erat et</li>
              </ul>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+1" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+2" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 2</h3>
              <ul style="color: #3d4643;">
                <li>Integer in ex nunc</li>
                <li>Curabitur sit amet tortor id nisl tempus venenatis</li>
                <li>Lorem ipsum dolor sit amet</li>
              </ul>
            </div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 3</h3>
              <ul style="color: #3d4643;">
                <li>Integer in ex nunc</li>
                <li>Curabitur sit amet tortor id nisl tempus venenatis</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Phasellus venenatis turpis nibh</li>
              </ul>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+3" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+4" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 4</h3>
              <ul style="color: #3d4643;">
                <li>Integer in ex nunc</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Phasellus venenatis turpis nibh</li>
              </ul>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="operation3">
  <h1 class="360_sub_titles" style="color: #214D29;">
    CONTENT 3
  </h1>
  <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam
    elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin.
  </p>
  <div class="div2">
    <div>
      <div id="360-slide-3">
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 1</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Maecenas sagittis dui tempus, porttitor erat et</li>
              </ul>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+1" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+2" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 2</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Integer eleifend erat elit</li>
              </ul>
            </div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 3</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Integer eleifend erat elit</li>
              </ul>
            </div>
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+3" width="400" /></div>
          </div>
        </div>
        <!--BREAK-->
        <div class="container first-content">
          <div class="row">
            <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+4" width="400" /></div>
            <div class="col">
              <h3 style="color: #214d29;">SUB-TITLE 4</h3>
              <ul style="color: #3d4643;">
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Maecenas sagittis dui tempus, porttitor erat et</li>
              </ul>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="operation4">
  <h1 class="360_sub_titles" style="color: #214D29;">
    CONTENT 4
  </h1>
  <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur.
  </p>
  <div class="div4">
    <div id="360-slide-4">
      <div class="container first-content">
        <div class="row">
          <div class="col">
            <h3 style="color: #214d29;">SUB-TITLE 1</h3>
            <ul style="color: #3d4643;">
              <li>Lorem ipsum dolor sit amet</li>
              <li>consectetur adipiscing elit</li>
            </ul>
          </div>
          <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+1" width="400" /></div>
        </div>
      </div>
      <!--BREAK-->
      <div class="container first-content">
        <div class="row">
          <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+2" width="400" /></div>
          <div class="col">
            <h3 style="color: #214d29;">SUB-TITLE 2</h3>
            <ul style="color: #3d4643;">
              <li>Lorem ipsum dolor sit amet</li>
              <li>consectetur adipiscing elit</li>
              <li>Maecenas sagittis dui tempus, porttitor erat et</li>
            </ul>
          </div>
        </div>
      </div>
      <!--BREAK-->
      <div class="container first-content">
        <div class="row">
          <div class="col">
            <h3 style="color: #214d29;">SUB-TITLE 3</h3>
            <ul style="color: #3d4643;">
              <li>Maecenas sagittis dui tempus, porttitor erat et</li>
              <li>Integer eleifend erat elit</li>
            </ul>
          </div>
          <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+3" width="400" /></div>
        </div>
      </div>
      <!--BREAK-->
      <div class="container first-content">
        <div class="row">
          <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+4" width="400" /></div>
          <div class="col">
            <h3 style="color: #214d29;">SUB-TITLE 4</h3>
            <ul style="color: #3d4643;">
              <li>Lorem ipsum dolor sit amet</li>
              <li>consectetur adipiscing elit</li>
              <li>Maecenas sagittis dui tempus, porttitor erat et</li>
            </ul>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Sadiinso
Sadiinso

Reputation: 312

You can add multiple event listeners using the eventlistener javascript API; you can also change an img tag image on the fly by changing its src attribute:

let clicked = false;
let ico = document.getElementById('ico');

// add listener for 'click' event on the '#ico' image
ico.addEventListener('click', (event) => {
    clicked = !clicked;
    if (clicked) {
        ico.src = "https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox.svg";
    } else {
        ico.src = "https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg";
    }
});

// second event listener
ico.addEventListener('click', (event) => {
    console.log('clicked');
});
<img id="ico" height="75" width="75" src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg">

To solve your problem, you can simply add an event listener on each icon and track which one is curently selected :

    let selected = null;
    let icons = document.getElementsByClassName('ico');
    for (const ico of icons) {
        ico.addEventListener('click', (event) => {
            selected = event.target;
            for (const ico of icons) {
                ico.src = "https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg";
            }
            
            selected.src = "https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox.svg";
        });
    }
<img class="ico" height="75" width="75" src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg">
<img class="ico" height="75" width="75" src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg">
<img class="ico" height="75" width="75" src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg">

Upvotes: 2

Related Questions