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

iframe failing to load link after initial attempt

Does HTML5 officially provide the speechsynthesis API for users?

Tips for managing Ajax JSON response in a PhoneGap application

Merging a VUE project and a .NET framework project to unleash their full potential

What are the different ways you can utilize the `Buffer` feature within Electron?

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

Mongoose: An unexpected error has occurred

Is it possible that using npm link could be the root cause of the "module not

"The text() or json() methods in Javascript's fetch function never seem to resolve, leaving the operation in a perpetual

Refreshing the page results in a 404 error when utilizing React Router

Clicking a button in React requires two clicks to update a boolean state by triggering the onClick event

How to use Vue.js to automatically redirect to a URL when a button is clicked

What is the method to retrieve JSON data from a URL and showcase the content on a JavaScript page?

tips for displaying a label and text side by side on a single line

Tick the box to activate the ability to uncheck multiple boxes when there are already a certain number of boxes checked

Exploring the power of Partial Views in ASP.NET MVC 4 with Ajax.ActionLink

Using the "align" attribute is considered outdated and not recommended in HTML5 documents

When integrating React with Tawk, the user's name and email are automatically encoded before being sent

What is causing the ajax code to malfunction?

Using jQuery to delay hiding for 2 seconds