Concealing Website Elements with javascript based on class assignments

Question

Concealing Website Elements with javascript based on class assignments

Despite my hesitation, I have to ask this question after unsuccessful searches in related articles. In my code, I have 7 nav links all with the same class. Due to the length of the HTML, I am looking for a way to hide contents until the link is clicked, and then have the content disappear when another nav link is clicked to make space for the next one. I would appreciate an answer in vanilla js, as that is what I am currently learning. You can find my pen here.


     <ul>
    <a href="#Hello_World" class="nav-link" onclick='myFunction()'>
        <li>Hello World</li>
    </a>
    <a href="#Introducing_JSX" class="nav-link">
        <li>Introducing JSX</li>
    </a>
    <a href="#Rendering_Elements" class="nav-link">
        <li>Rendering Elements</li>
    </a>
    <a href="#Components_and_Props" class="nav-link">
        <li>Components and Props</li>
    </a>
    <a href="#State_and_Lifecycle" class="nav-link">
        <li>State and Lifecycle</li>
    </a>
    <a href="#Handling_Events" class="nav-link">
        <li>Handling Events</li>
    </a>
    <a href="#Thinking_in_React" class="nav-link">
        <li>Thinking in React</li>
    </a>
    
    </ul>

This is how my navigation bar looks like.

Please note that I am new to JavaScript. Thank you for your understanding and time.

javascript css

Answer 1

Answer №1

I am following along with this helpful tutorial.

Styling with CSS:

.tabcontent{display:none}

Building the Structure in HTML:

<ul>
    <li>
        <button id="default" class="tablinks" onclick="myFunction('helloWorld')">Hello World</button>
        <div id="helloWorld" class="tabcontent">
            <ul><li>1</li><li>2</li><li>3</li></ul>
        </div>
    </li>
    <li>
        <button class="tablinks" onclick="myFunction('jsx')">JSX</button>
        <div id="jsx" class="tabcontent">
            <ul><li>Intro JSX</li><li>Intro JSX 2</li></ul>
        </div>
    </li>
    <li>
        <button class="tablinks" onclick="myFunction('react')">React</button>
        <div id="react" class="tabcontent">
            <ul><li>intro raect 1</li><li>intro react 2</li></ul>
        </div>
    </li>
</ul>

Implementing JavaScript Functionality:

function myFunction(id){
    var i, tabcontent;

    // Hide all elements with class="tabcontent"
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Display the current tab and add an "active" class to the corresponding button
    document.getElementById(id).style.display = "block";
}

document.getElementById("default").click();

Answer 2

I am following along with this helpful tutorial.

Styling with CSS:

.tabcontent{display:none}

Building the Structure in HTML:

<ul>
    <li>
        <button id="default" class="tablinks" onclick="myFunction('helloWorld')">Hello World</button>
        <div id="helloWorld" class="tabcontent">
            <ul><li>1</li><li>2</li><li>3</li></ul>
        </div>
    </li>
    <li>
        <button class="tablinks" onclick="myFunction('jsx')">JSX</button>
        <div id="jsx" class="tabcontent">
            <ul><li>Intro JSX</li><li>Intro JSX 2</li></ul>
        </div>
    </li>
    <li>
        <button class="tablinks" onclick="myFunction('react')">React</button>
        <div id="react" class="tabcontent">
            <ul><li>intro raect 1</li><li>intro react 2</li></ul>
        </div>
    </li>
</ul>

Implementing JavaScript Functionality:

function myFunction(id){
    var i, tabcontent;

    // Hide all elements with class="tabcontent"
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Display the current tab and add an "active" class to the corresponding button
    document.getElementById(id).style.display = "block";
}

document.getElementById("default").click();

Concealing Website Elements with javascript based on class assignments

Answer №1

Similar questions

AngularJS' $rootScope is experiencing issues with creating internal variables

Leveraging $this in conjunction with a jQuery plugin

What is the best way to set up the login page and logged-in homepage using Node, Express, and Passport with the "/" route?

Streaming live audio through socket io. Need help troubleshooting ALSA shutdown issue

Guide on Incorporating Coffeescript into the Node.js Blueprint Framework

URL from different domains

Incorporating the id attribute into the FormControl element or its parent in Angular 7

Starting data initialization using a property object within a Vue component

Find the div element that wraps around the currently selected radio button

The client side script "/socket.io/socket.io.js" was not located, therefore the Express-generator project was used instead

Each time the page is reloaded, the Ajax call is triggered, resulting in duplicated

Create a sinusoidal wave and stream it through the web browser

What is the best way to modify the text color in an MUI Text Field?

What could be causing my navigation bar to malfunction?

Ways to subtly adjust the edges of text in a design

Creating a list of font sizes for each <p> tag in my HTML document

Incorporating a closing screen into a game built with Canvas and jQuery

Displaying a progress bar while fetching data in Vue: A step-by-step guide

Guide on making a persistent sidebar using CSS and JavaScript

Check domains using Jquery, AJAX, and PHP