Need someone with both HTML/CSS and Javascript expertise to help me out.

Hi Smriti,

I had a look at your question and I really liked this feature.

I dealt with it the following way:

I first updated the CSS and set all tab-content to not visible apart from first child

.tab-content:not(:first-child) {
    display: none;
    padding:15px;
}

And here is my javascript (add js folder to the root file, name the file inside app.js and add <script charset="utf-8" src="js/app.js" type="text/javascript"></script> just before the closing body tag)

const list = document.querySelectorAll('.tabs li');
const tabContent = document.querySelectorAll('.switch-area .tab-content');
list.forEach((listItem) => {
    listItem.addEventListener('click', () => {
        for (var i = 0; i < list.length; i++) {
            list[i].classList.remove('current');
        }
        listItem.classList.add('current');
        tabContent.forEach((tab) => {
            if (listItem.dataset.tab === tab.id) {
                for (var i = 0; i < tabContent.length; i++) {
                    tabContent[i].style.display = 'none';
                }
                document.getElementById(tab.id).style.display = 'inline-block';
            }
        })
    })
});

I am sure that JS could be written in the much cleaner fashion, I am not good with it at all. But basically what I did here, is I took all of your tabs on the left and on the right and assigned them to variables, I then added event listener (click) to every item in the left tab, and on this click I remove the class "current" from every item on the left and assign same "current" class to the item I clicked on.

Then I am not sure how to say it in English, but I match "data-tab" value from the left side (written in JS as dataset.tab) with the right side tab ID's ("tab-n") and when they match, I set the matched ID with "data-tab" and set the display to inline-block to that ID. But prior to this I set display to none to all right tab elements.

Sorry, hope this makes sense.

Hi Smriti.

Vlad's suggested solution looks correct though it can definitely be improved. I would recommend you complete the Javascript Basics; Javascript Loops, Arrays, and Objects; and Javascript and the DOM courses to get a well-rounded view of how you would tackle something like what you mentioned.

From a high-level perspective, you want to build a basic data model to represent the data on the page, then use event handlers to track which <li> has been clicked and set it to active (changing the data via a class or direct styling to hide or show it as needed). That should get you started.