Question

I am creating a website in which I have two different buttons.

By using jQuery, I want to hide and show two elements. Both elements are the text. e.g by click on buttonA, textA should show and if textB was visible, it should hide. similarly by click on buttonB, textB should show and if textA was visible, it should hide. Initially both the text should be hidden but loaded on their positions.

Both the texts have same positioning on the layout. i have defined a class (.content is its name) which maintains all the styling for the text. Now the issue I am facing is that I have two div both with the class but I am unable to give two different ids to the texts.

.content {
  visibility:hidden;
  border-style: none;
  display: block;
  position: fixed;
  text-align: centre;
  z-index: 1;
  margin-top: 40%;
  margin-left: 25%;
  margin-right: 25%;
  background-color: transparent;
  font-size:2.5em;
}

The problem is here how to assign some unique ids also to both texts

<div class="content">TextA goes here<br></div>
<div class="content">TextB goes here<br></div>

so when I use jquery

$("#ButtonA").click(function(){
  $("#TextA").show();$("#TextB").hide();
});

$("#ButtonB").click(function(){
  $("#TextB").show();$("#TextA").hide();
});

Though it might be lame question but I couldnt figure it out myself so had to ask.

Answer 1

Can you explain why you can’t use different ids for the elements?

<div class="content" id="TextA">TextA goes here<br></div>
<div class="content" id="TextB">TextB goes here<br></div>