3 different images with 3 buttons to open the text

Asked

Viewed 33 times

1

3 different images with 3 buttons to open each a different text. Only the first button works and the second and third texts when the first button is pressed move with the movement of the first text. I’ve looked everywhere and I can’t find the solution.

Someone can help me?

var content = document.getElementById("content");
var button = document.getElementById("show-more");

button.onclick = function() {
  if (content.className == "open") {
    content.className = "";
    button.innerHTML = "Ler Mais";

  } else {
    content.className = "open";
    button.innerHTML = "Fechar";
  }

};
#content {
  width: 280px;
  background: #fff;
  padding: 20px;
  padding-top: 15px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  background-color: whitesmoke;
  margin-left: 100px;
  max-height: 8px;
  overflow: hidden;
  transition: max-height 0.7s;
}

#content.open {
  width: 280px;
  max-height: 500px;
  transition: max-height 0.7s;
}

#show-more {
  display: inline-block;
  text-decoration: none;
  padding: 10px 10px;
  font-size: 12px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  -webkit-box-shadow: 0 0 1px #000;
  -moz-box-shadow: 0 0 1px #000;
  box-shadow: 0 0 1px #000;
  margin-left: 210px;
  margin-top: 2px;
  cursor: pointer;
}
<div id="content">O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. espécime de livro. Este texto não só sobreviveu 5 séculos.</div>
<div id="cont1">O Lorem programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum</div>
<div class="mark">Depois de ter o site
  <div class="mark">Depois de ter o O Lorem Ipsum é um texto modelo da indústria tipográfica e de.
  </div>
  <a id="show-more">Show more</a>
  <a id="show.more1">Show more</a>
</div>
We have three images. Underneath each one is a button to click to say "read more". Each image has its distinct text. The text only appears when you click on the button.( we say that the text unwinds) The problem is that the text of the second image when clicking on the button of the first image, also appears, even without having a command nehnum and scrolls to the end of the page. Not to mention that every time I add a new button to the script, everything stops working. In short, I’ve tried everything and something is failing me and I don’t see the error.

  • Fatima, can you explain the difference between the buttons and what you want them to do? You can click [Edit] and add this information to the question...

  • It must be in javascript or it can be in jquery?

  • Nor did I understand in this code what means first and second image. Put your code more complete, please? Or give more details.

  • It can be in jquery it doesn’t have to be in Javascript. I didn’t put tags of the images because the button stays out of them. In other words, it’s not the image you press, but the button on the outside.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.