Account Deleted
Hello.
There are some straightforward ways to achieve that, you could actually do it only with CSS by using labels and linking each one to a radio button and use a sibling selector to show the content inside a div
Something like this:
HTML
<label for="tab1">Tab1</label>
<input type="radio" name="tabs" id="tab1" checked> <---- checked if you want to show first
<div class="content"> this is the content of the first tab </div>
<label for="tab2">Tab2</label>
<input type="radio" name="tabs" id="tab2">
<div class="content"> this is the content of the second tab </div>
CSS
//
.content {
// content is hidden by default
display: none;
}
input[type="radio"]:checked + div {
// if radio is checked show the content
display: block;
}
If you want a JS solution, you have multiple options but consider using different page routes if there's a lot of content on each tab. We don't have a lot of content on this challenge so we don't have to worry about that, so we can use buttons and onClick
event to handle the action.
Regarding the resources, you can see a lot of useful stuff in css-tricks
Let me know if you have any doubt or if you need any help with the javascript implementation and I'll be glad to help.
@Munif-cyber
Posted
@juanmesa2097
Thanks a lot i really appreciate, i will do as u said
Account Deleted
@Munif-cyber you're very welcome.