I'm currently working on a tabbed module that consists of three tabs.
Here's how it operates: When the user clicks on a carousel_element, it reveals carousel_hidden-text within that div and displays it in another div called carousel_quote.
I'm facing some uncertainties:
- The default content is not pre-loaded in
carousel_quote. In the example below, you can see that the red box is empty. I want it to automatically display the secondcarousel_element(lorum ipsum 2) by default. - I also want the border on the second
carousel_elementto be red by default, indicating that this tab is active. To achieve this, I used
but it doesn't appear to have any effect. Additionally, whenever another tab is clicked, I need to removejQuery('."carousel_element:nth-child(2)').addClass("carousel_selected");carousel_selectedfrom the previous one and add it to the appropriatecarousel_element.
Sample Code:
jQuery(document).on('click', '.carousel_element', function() {
jQuery('.carousel_quote').html(jQuery(this).find('.carousel_hidden-text').html());
jQuery('."carousel_element:nth-child(2)').addClass("carousel_selected");
jQuery('.carousel_element').removeClass('carousel_selected');
jQuery(this).addClass('carousel_selected');
});.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
padding: 0;
margin-top: 0;
position: relative;
color: #002f33;
width: 100vw;
}
.carousel {
display: flex;
flex-direction: row;
}
.carousel_element {
border-bottom: solid 1px #999;
height: 6em;
width: 100%;
margin: 0 5px;
}
.carousel_element .carousel_hidden-text {
/* display: none; */
text-align: center;
}
.carousel_container .carousel_quote {
margin-left: auto;
margin-right: auto;
height: 10em;
width: 75%;
text-align: center;
margin-top: 1em;
border: 1px solid red;
}
.carousel_selected {
border-color: red!important;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container carousel_container">
<div class="wrapper">
<div class="carousel">
<div class="carousel_element">
<div class="carousel_hidden-text">
<p>Lorum Ipsum 1 </p>
<p class="carousel_reference">Author1 </p>
</div>
</div>
<div class="carousel_element">
<div class="carousel_hidden-text">
<p>Lorum Ipsum 2</p>
<p class="carousel_reference">Author 2</p>
</div>
</div>
<div class="carousel_element">
<div class="carousel_hidden-text">
<p>Lorum Ipsum 3</p>
<p class="carousel_reference">Author 3</p>
</div>
</div>
</div>
<!-- .carousel end -->
<div class="carousel_quote"></div>
</div>
</div>