Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

How good are you (Bookmark landing page) with layouts- correct me pls

munif• 135

@Munif-cyber

Desktop design screenshot for the Bookmark landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


how can i switch between those tabs, using javascript, pls recommend resources i could use, then how do i improve this work, thanks in advance

Community feedback

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.

2

munif• 135

@Munif-cyber

Posted

@juanmesa2097

Thanks a lot i really appreciate, i will do as u said

1

Account Deleted

@Munif-cyber you're very welcome.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord