Changing div content when clicking buttons

Question

I'm trying to make some sort of gallery on my website. There are 3 buttons, and underneath some text and picture are placed. When I click the button, I want that the content changes (to the content from button #2 etc.). How can I achieve that?

<ul>
  <a href="">
    <li>Btn1</li>
  </a>
  <a href="">
    <li>Btn2</li>
  </a>
  <a href="">
    <li>Btn3</li>
  </a>
</ul>

<div class="list-first"">
  <p class="list-first list-first-mobile">some text from first btn</p>
  <img src="imgs/stock1.jpeg" alt="jpg from first btn" class="list-first-img">
</div>

you can use jquery to achieve this. First of explain clearly that what you want to replace and where. — Devsi Odedra, May 29 '19 at 09:41
please see this link first : https://stackoverflow.com/questions/7139208/change-content-of-div-jquery — Shojaeddin, May 29 '19 at 09:41
As said above, you can use jQuery. Also note that the `
` of your HTML is invalid and should be `
` — Karl, May 29 '19 at 09:42
Please don't use anchor tags for buttons. Use buttons for buttons. ` — Kobe, May 29 '19 at 09:47
thanks guys! I will check that link in a moment. I want to replace all content from div called list-first (text and img). — miron, May 29 '19 at 09:47

Shubham Dixit · Accepted Answer · 2019-05-30T09:39:21.847

0

Try this ,hope it helps

document.querySelectorAll('button').forEach((el, i) => {
  el.addEventListener("click", () => {
    document.querySelectorAll('p').forEach(ed => ed.style.display = "none")
    el.nextElementSibling.style.display = "block"
  })
})

<style>

.loc-caption:before {
  content: attr(title);
  display: block;
}

ul {
  text-align: center;
  padding: 0;
}

li {
  width: 25%;
  display: inline-block;
  vertical-align: top;
}

li img {
  max-width: 100%;
  height: auto;
}

 
</style>

<ul>
  <li class="loc-caption"><button>ClickME</button>
    <p style="display:none" class="list-first list-first-mobile ">
      <img src="https://chainimage.com/images/related-pictures-natural-sceneries-beautiful-wallpapers.jpg" alt="jpg from first btn " class="list-first-img "> some text from first btn
    </p>
  </li>
  <li class="loc-caption"><button>ClickME2</button>
    <p style="display:none" class="list-first list-first-mobile ">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwXvWYU5tYrokWILC7lgjmCYqYGvActZnt9q8AcPs4dR7hMTBR" alt="jpg from second btn " class="list-first-img "> some text from second btn
    </p>
  </li>
  <li class="loc-caption"><button>ClickME3</button>
    <p style="display:none" class="list-first list-first-mobile ">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzzP-CJnW3xuNeqqMcNLzK_IFPCywsEKifAWlajEzWcdALIDLI" alt="jpg from third btn " class="list-first-img "> some text from third btn
    </p>
  </li>

</ul>

edited May 30 '19 at 09:39

answered May 29 '19 at 09:50

Shubham Dixit

9,242
4
27
46

It's not what I wanted to achieve. [screenshot](https://imgur.com/a/IRbRjuJ) <- I want that the content (this content which I marked with white border) changes when you press the buttons. Like a some kind of 'gallery'. When you press first, it changes back to previous content etc. I'm really struggling with this and have no idea – miron May 30 '19 at 08:06
content is chnaging here when you press the buttons in my example @miron – Shubham Dixit May 30 '19 at 08:08
Yeah, but not changing to previous, eg. from third to first. I want that every button has its own content (photo+text) – miron May 30 '19 at 08:20
@miron Could you explain more ,I can change my answer accordingly – Shubham Dixit May 30 '19 at 08:21
[That's what I made with Chrome Inspector and want to achieve on live website](https://imgur.com/a/hgVa35w) and thank you in advance! – miron May 30 '19 at 08:33
I have edited my answer,you can add your css like you want @miron – Shubham Dixit May 30 '19 at 09:33
yes, that's what Ive been looking for. Thank you, really! :D – miron May 30 '19 at 09:53

Changing div content when clicking buttons

1 Answers1