I'm faced with a dilemma on my HTML page. In the middle of the content, there's a div that contains 4 links with images and text inside.
What I'm looking to achieve is for each link to trigger a complete change in the div when clicked, without reloading the entire page. The updated div should display a new image, different text, and an additional link. Crucially, the original 4 links should remain visible so that users can click on another one to see the same transformation.
I've attempted various methods like replacing or toggling elements, however, these solutions are limited to only 2 elements. I need a way to handle all 4 links seamlessly.
Below is my HTML structure:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<a href="#"><img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/></a>
<a href="#"><img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/></a>
<a href="#"><img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/></a>
<a href="#"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
(Additional offer containers follow...)
My current CSS style rules related to this issue:
.offers_content {
min-height: 450px;
background-color: #fff;
}
#offer_quickstart, #offer_quickstartplus, #offer_basic, #offer_pro {
display: none;
}
#offers_content {
display: block;
}
.offer_image {
margin: 5% auto auto auto;
}
.offer_text_ad > p {
color: #000;
}
Any advice or guidance provided would be greatly appreciated. Thank you!