Sophisticated method in JavaScript to conceal and reveal div elements

Question

Sophisticated method in JavaScript to conceal and reveal div elements

My knowledge of front-end web development is strongest in HTML and CSS, but when it comes to JavaScript, I feel like there must be a more efficient way to achieve the functionality I want.

On my website, I have a set of <li> items that, when clicked, display a specific div. If another div is already visible (linked to a different <li> item), it hides the previous one and shows the new one. Additionally, an active class is assigned to the selected <li> item for better user experience.

Below is the HTML and JavaScript code I'm currently using:

    <li id="general">General</li>
    <li id="blog">Blog</li>
    <li id="twitter">Twitter</li>

And here's the JavaScript function (which I admit is not the most elegant solution):

$(document).ready(function() {

$("#general").addClass("active");

$("#general").click(function() {
    $(".data-tab").hide();
    $(".settings-general").toggle();
    $("li").removeClass("active");
    $("#general").addClass("active");
});

$(".settings-twitter").hide();

$("#twitter").click(function() {
    $(".data-tab").hide();
    $(".settings-twitter").toggle();
    $("li").removeClass("active");      
    $("#twitter").addClass("active");
});

$(".settings-blog").hide();

$("#blog").click(function() {
    $(".data-tab").hide();
    $(".settings-blog").toggle();
    $("li").removeClass("active");      
    $("#blog").addClass("active");
})

});

The current setup works fine, but I can't help but think there's a cleaner jQuery method to achieve the same result. Any suggestions for a JavaScript beginner like me?

javascript jquery html css

Answer 1

Answer №1

To achieve the desired outcome, you can either create a single function that performs the task twice, or you have the option to iterate over the code for each item you want to configure.

function initializeElement(type){
    $(".settings-"+type).hide();

    $("#"+type).click(function() {
        $(".data-tab").hide();
        $(".settings-"+type).toggle();
        $("li").removeClass("active");      
        $(this).addClass("active");
    });
}

initializeElement('blog');
initializeElement('twitter');

Answer 2

To achieve the desired outcome, you can either create a single function that performs the task twice, or you have the option to iterate over the code for each item you want to configure.

function initializeElement(type){
    $(".settings-"+type).hide();

    $("#"+type).click(function() {
        $(".data-tab").hide();
        $(".settings-"+type).toggle();
        $("li").removeClass("active");      
        $(this).addClass("active");
    });
}

initializeElement('blog');
initializeElement('twitter');

Answer 3

Answer №2

Utilize data attributes to drive the entire process by adding them to the options. This allows the same code to be used for any number of items without requiring changes to the code:

http://jsfiddle.net/TrueBlueAussie/8hvofd6m/2/

$(document).ready(function () {
    $(".menu:first").addClass("active");
    $('.settings-general').show();
    $(".menu").click(function () {

        var $active = $(this);

        // Remove active class from inactive items
        $(".menu").not($active).removeClass("active");

        // Add active class to the selected item
        $active.addClass("active");

        // Locate the target using a jQuery selector in the data-setting attribute
        var $setting = $($active.data('setting'));

        // Hide other settings
        $('.settings').not($setting).hide();

        // Display the selected setting
        $setting.show();
    });
});

The values assigned to the data-setting attributes can be any selector, class, id, or complex structure, allowing for creative implementations like:

<li class="menu" data-setting="#info .subinfo:first">First info</li>

Answer 4

Utilize data attributes to drive the entire process by adding them to the options. This allows the same code to be used for any number of items without requiring changes to the code:

http://jsfiddle.net/TrueBlueAussie/8hvofd6m/2/

$(document).ready(function () {
    $(".menu:first").addClass("active");
    $('.settings-general').show();
    $(".menu").click(function () {

        var $active = $(this);

        // Remove active class from inactive items
        $(".menu").not($active).removeClass("active");

        // Add active class to the selected item
        $active.addClass("active");

        // Locate the target using a jQuery selector in the data-setting attribute
        var $setting = $($active.data('setting'));

        // Hide other settings
        $('.settings').not($setting).hide();

        // Display the selected setting
        $setting.show();
    });
});

The values assigned to the data-setting attributes can be any selector, class, id, or complex structure, allowing for creative implementations like:

<li class="menu" data-setting="#info .subinfo:first">First info</li>

Answer 5

Answer №3

To simplify the layout, you can apply a single class to a parent container and utilize CSS properties to conceal specific elements. Here is an example:

<style>
    div.tab { display: none }

    body.general li.general { font-weight: bold; }
    body.general div.tab.general { display: block; }

    body.blog li.blog { font-weight: bold; }
    body.blog div.tab.blog { display: block; }

    body.twitter li.twitter { font-weight: bold; }
    body.twitter div.tab.twitter { display: block; }
</style>

<body>
    <ul>
      <li class="general">General</li>
      <li class="blog">Blog</li>
      <li class="twitter">Twitter</li>
    </ul>

    <div class="general tab">general tab</div>
    <div class="blog tab">blog tab</div>
    <div class="twitter tab">twitter tab</div>

    <script>
        $('li').click(function () {
            $('body').attr('class', $(this).attr('class'));
        });
    </script>
</body>

For a demonstration of this method in action, please visit http://jsfiddle.net/szzdyp1n/.

Answer 6

To simplify the layout, you can apply a single class to a parent container and utilize CSS properties to conceal specific elements. Here is an example:

<style>
    div.tab { display: none }

    body.general li.general { font-weight: bold; }
    body.general div.tab.general { display: block; }

    body.blog li.blog { font-weight: bold; }
    body.blog div.tab.blog { display: block; }

    body.twitter li.twitter { font-weight: bold; }
    body.twitter div.tab.twitter { display: block; }
</style>

<body>
    <ul>
      <li class="general">General</li>
      <li class="blog">Blog</li>
      <li class="twitter">Twitter</li>
    </ul>

    <div class="general tab">general tab</div>
    <div class="blog tab">blog tab</div>
    <div class="twitter tab">twitter tab</div>

    <script>
        $('li').click(function () {
            $('body').attr('class', $(this).attr('class'));
        });
    </script>
</body>

For a demonstration of this method in action, please visit http://jsfiddle.net/szzdyp1n/.

Sophisticated method in JavaScript to conceal and reveal div elements

Answer №1

Answer №2

Answer №3

Similar questions

Attempting to transpile JavaScript or TypeScript files for compatibility within a Node environment

What is the process for eliminating the invocation of a function in Jquery?

Unable to transform data types

Step-by-step guide to utilizing instance functions in AngularJS

Tips for incorporating the ternary operator in JSX of a React component while utilizing TypeScript?

Tips for adding values to an object

A web address shared in a post appears within the nested frame of an iframe

Troubles encountered in retrieving values from various <select>/<option> elements

What is the best way to run code once a callback function has completed its task?

Get the Label Values Based on CheckBox Status

Adjust the cell color for AgendaWeek view only in the full calendar

Uncertainty surrounding the application of class selector within CSS

The deep reactivity feature in Vue3 is functioning well, however, an error is being

What steps can be taken to disable Angular's automatic trimming of fields?

Merging two functions for concealing an element

JQuery user interface dialog button

Displaying the output of a PHP script in an AJAX request

Retrieving information from a DELETE request using PHP

Is Cognito redirect causing issues with Angular router responsiveness?

FixPermissions not working properly | Discord.js EXPERT