Clarification: Javascript to Toggle Visibility of Divs

Question

Clarification: Javascript to Toggle Visibility of Divs

There was a similar question that partially solved my issue, but I'm wondering if using class or id NAMES instead of ul li - such as .menu, #menu, etc. would work in this scenario.

CSS:

div { display:none; background:red; width:200px; height:200px; }

JS:

$(function() {
    $('ul li').each(function() {
        $(this).click(function(e) {
            var i = $(this).index();
            $('div').hide();
            $('div:eq('+i+')').show();
        });
    });
});

Here is the jsfiddle link for reference: http://jsfiddle.net/Z3Hj7/

I apologize if this question seems trivial, but I've been struggling with it and can't seem to find a solution.

javascript css html

Answer 1

Answer №1

Absolutely, it is possible:

$(document).ready(function() {
  $('#menu .list').on('click', function(event) {
    var index = $(this).index();
    $('div').hide();
    $('div:eq('+index+')').show();
  });
});

No need to use a loop for this task.

Check out the demo here

Answer 2

Absolutely, it is possible:

$(document).ready(function() {
  $('#menu .list').on('click', function(event) {
    var index = $(this).index();
    $('div').hide();
    $('div:eq('+index+')').show();
  });
});

No need to use a loop for this task.

Check out the demo here

Answer 3

Answer №2

To enhance your JavaScript skills, consider utilizing the parameters of the $.each function:

$(document).ready(function() {
    $('ul li').each(function(index, element) {
        $(element).click(function() {
            $('div').hide();
            $('div:eq('+index+')').show();
        });
    });
});

Answer 4

To enhance your JavaScript skills, consider utilizing the parameters of the $.each function:

$(document).ready(function() {
    $('ul li').each(function(index, element) {
        $(element).click(function() {
            $('div').hide();
            $('div:eq('+index+')').show();
        });
    });
});

Answer 5

Answer №3

This code snippet was created a while back for the purpose of hiding elements with specific ids. Elements like img, div, a, li ul, table, etc., all require their style to be set as visible/relative visibility: visible; position: relative;

The function switches visibility from visible to hidden to conceal the element and then changes the position to absolute in order to prevent the element from causing white space in its original position.

Here's the code on http://jsfiddle.net/ShawnsSpace/URRDy/

<div id="togglethis" style="visibility: visible; position: relative; border: 4px dotted;">Click the button to toggle this Div</div>

<button onclick="toggle('togglethis');">Toggle</button>


    <script type="text/javascript">
//<![CDATA[
function toggle(obj) {
    var item = document.getElementById(obj);
    if (item.style.visibility=='visible') {
        item.style.visibility = 'hidden';    
     }
    else {
        item.style.visibility = 'visible';
     }
     //
    if (item.style.position=='relative') {
    item.style.position = 'absolute'; 
    }
    else { 
    item.style.position = 'relative'; 
    }   
}
//]]>
</script>

Answer 6

This code snippet was created a while back for the purpose of hiding elements with specific ids. Elements like img, div, a, li ul, table, etc., all require their style to be set as visible/relative visibility: visible; position: relative;

The function switches visibility from visible to hidden to conceal the element and then changes the position to absolute in order to prevent the element from causing white space in its original position.

Here's the code on http://jsfiddle.net/ShawnsSpace/URRDy/

<div id="togglethis" style="visibility: visible; position: relative; border: 4px dotted;">Click the button to toggle this Div</div>

<button onclick="toggle('togglethis');">Toggle</button>


    <script type="text/javascript">
//<![CDATA[
function toggle(obj) {
    var item = document.getElementById(obj);
    if (item.style.visibility=='visible') {
        item.style.visibility = 'hidden';    
     }
    else {
        item.style.visibility = 'visible';
     }
     //
    if (item.style.position=='relative') {
    item.style.position = 'absolute'; 
    }
    else { 
    item.style.position = 'relative'; 
    }   
}
//]]>
</script>

Answer 7

Answer №4

Regarding the inquiry regarding utilizing the ID and class as the selector, it is possible: http://jsfiddle.net/Z3Hj7/1/

Answer 8

Regarding the inquiry regarding utilizing the ID and class as the selector, it is possible: http://jsfiddle.net/Z3Hj7/1/

Clarification: Javascript to Toggle Visibility of Divs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Display or conceal a div element using a dropdown menu selection

Having trouble with loading JavaScript during ng build --prod process

Leverage the power of an Express server to manage a Node.js application

Linking chained functions for reuse of code in react-redux through mapStateToProps and mapDispatchToProps

"Master the art of using express and jade to loop through data and generate dynamic

Unexpected issue with concatenating JavaScript files in AngularJS using Grunt

Use jQuery to achieve smooth scrolling when clicking on a link that points to a specific #div, maintaining the URL

Updating the placeholder text of a textarea using a conditional statement in PHP

Employing ng-click within a displayed column of Datatable

My code written using Visual Studio Code is not displaying properly when I view it in my browser

Tips for Disabling ML5 Posenet

Presenting a trio of distinct tables each accompanied by its own unique button option

Displaying Dates in an Express Application using EJS

Using JavaScript to Generate Formatting Tags Based on User Selections from a Multiselect Dropdown

Incorrect data retrieval from JSON object with JQUERY

The Checkbox generated by Javascript is failing to properly close the tag

What could be causing my popup window to not display on top of all other HTML elements?

What is causing the "unable to resolve dependency tree" error when using ng new newApp?

How can I ensure that my boxes are aligned in a straight line?

Send an array from PHP to jQuery using AJAX, then send the array back from jQuery to PHP