My project involves HTML, CSS, and Bootstrap 4. It includes a search box with multiple tabs. The issue I'm facing is that when I switch tabs, the tab content doesn't change and new content gets added to the old one. What might be the problem?
You can view the codes here:
[Text](https://codepen.io/setarezre/pen/qBRVjJe?editors=1000)
.searchBox {
background: #f6f7fb;
border-radius: 3px;
box-shadow: 0 6px 20px rgba(24, 104, 188, .07);
direction: rtl;
}
.searBox-top {
position: absolute;
width: 100%;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
-webkit-transform: translate(50%, -50%);
-moz-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
-o-transform: translate(50%, -50%);
}
.searchBox .adult-search button {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
...
</section>