Switching the visibility of a DIV by clicking on a list item

Question

Switching the visibility of a DIV by clicking on a list item

Struggling with a seemingly simple function for way too long now. The task is to show a hidden div with information on an item when it's clicked, without using jQuery. Tried multiple examples from various sources but nothing seems to work. Hoping for a straightforward solution before going crazy. Any suggestions?

JS:

var div = document.getElementById('show')
var beer = document.getElementById('beer')

function show_div() {
    if (div.style.display == "none") {
        div.style.display = ""
    } else {
        div.style.display = "none"
    }
};

CSS

div { display: none; }

HTML

<li>Beers I Currently Have
    <ul>
        <li><a href="#" id="beer" onclick="show_div">2 Sierra Nevada Bigfoot (12/11/14)</a></li>
    <div id="show">Delicious barley wine that has been aging in my cellar for nearly 2 years now.</div>
    ....

javascript html css

Answer 1

Answer №1

HTML:

<ul>
    <li>
        <a href="#" id="beer">2 Sierra Nevada Bigfoot (12/11/13)</a>
        <div hidden>Delicious barley wine that has been aging in my cellar for nearly 2 years now.</div>
    </li>
</ul>

CSS:

/* No need to set display:none here
   since we are using 'hidden' directly
   in the element. */
#beer div { }

JavaScript:

var beer = document.getElementById('beer')

// Add an event listener to beer. Listen for
// the 'click' event.
beer.addEventListener('click', function(e) {
    e.preventDefault(); // prevent default <a> behavior

    info = e.target.nextElementSibling;
    if (info.hidden) info.hidden = false;
    else info.hidden = true;

    return false; // prevent default <a> behavior
});

This code allows users to toggle a hidden div by clicking on a link within a list item. Placing them next to each other in the DOM makes accessing the div easier. The e.target.nextElementSibling method is used to access the next sibling element of the clicked link. To understand what e represents, use console.log(e) in the click handler. Check out this fiddle for a live demo: https://jsfiddle.net/zs6aL7x2/

Answer 2

HTML:

<ul>
    <li>
        <a href="#" id="beer">2 Sierra Nevada Bigfoot (12/11/13)</a>
        <div hidden>Delicious barley wine that has been aging in my cellar for nearly 2 years now.</div>
    </li>
</ul>

CSS:

/* No need to set display:none here
   since we are using 'hidden' directly
   in the element. */
#beer div { }

JavaScript:

var beer = document.getElementById('beer')

// Add an event listener to beer. Listen for
// the 'click' event.
beer.addEventListener('click', function(e) {
    e.preventDefault(); // prevent default <a> behavior

    info = e.target.nextElementSibling;
    if (info.hidden) info.hidden = false;
    else info.hidden = true;

    return false; // prevent default <a> behavior
});

This code allows users to toggle a hidden div by clicking on a link within a list item. Placing them next to each other in the DOM makes accessing the div easier. The e.target.nextElementSibling method is used to access the next sibling element of the clicked link. To understand what e represents, use console.log(e) in the click handler. Check out this fiddle for a live demo: https://jsfiddle.net/zs6aL7x2/

Answer 3

Answer №2

When using onclick="show_div", remember to include parentheses like this: onclick="show_div()"

To display an element with id #show, use CSS rule div #show{ display: auto; } instead of div { display: none; }
Always remember to end each statement in your code with ;

var div = document.getElementById('show');
    var beer = document.getElementById('beer');

    function show_div() {
    if(div.style.display == "none"){
    div.style.display = "";
    } else { div.style.display = "none";
    }
    };

#show { display: auto; }

<li>Beers I Currently Have
<ul>
    <li><a href="#" id="beer" onclick="show_div()">2 Sierra Nevada Bigfoot (12/11/14)</a></li>
        <div id="show">Delicious barley wine that has been aging in my cellar for nearly 2 years now.</div>

Instead of using div.style.display which may be overridden by inline styles, consider using getComputedStyle function

Here's another approach utilizing the getComputedStyle function:

var div = document.getElementById('show');
    var beer = document.getElementById('beer');

    function show_div() {
    console.log(div.style.display);
    if(getComputedStyle(div,null).display== "none"){
    div.style.display = "block";
    } else { div.style.display = "none";
    }
    };

#show { display: none; }

<li>Beers I Currently Have
<ul>
    <li><a href="#" id="beer" onclick="show_div()">2 Sierra Nevada Bigfoot (12/11/14)</a></li>
        <div id="show">Delicious barley wine that has been aging in my cellar for nearly 2 years now.</div>

Answer 4

When using onclick="show_div", remember to include parentheses like this: onclick="show_div()"

To display an element with id #show, use CSS rule div #show{ display: auto; } instead of div { display: none; }
Always remember to end each statement in your code with ;

var div = document.getElementById('show');
    var beer = document.getElementById('beer');

    function show_div() {
    if(div.style.display == "none"){
    div.style.display = "";
    } else { div.style.display = "none";
    }
    };

#show { display: auto; }

<li>Beers I Currently Have
<ul>
    <li><a href="#" id="beer" onclick="show_div()">2 Sierra Nevada Bigfoot (12/11/14)</a></li>
        <div id="show">Delicious barley wine that has been aging in my cellar for nearly 2 years now.</div>

Instead of using div.style.display which may be overridden by inline styles, consider using getComputedStyle function

Here's another approach utilizing the getComputedStyle function:

var div = document.getElementById('show');
    var beer = document.getElementById('beer');

    function show_div() {
    console.log(div.style.display);
    if(getComputedStyle(div,null).display== "none"){
    div.style.display = "block";
    } else { div.style.display = "none";
    }
    };

#show { display: none; }

<li>Beers I Currently Have
<ul>
    <li><a href="#" id="beer" onclick="show_div()">2 Sierra Nevada Bigfoot (12/11/14)</a></li>
        <div id="show">Delicious barley wine that has been aging in my cellar for nearly 2 years now.</div>

Switching the visibility of a DIV by clicking on a list item

Answer №1

Answer №2

Similar questions

What is the best way to align elements in relation to a central div container?

Operate on Nested JSON Arrays

Tips on converting HTML code into a data image URI

Trouble with jQuery on click function, no actions triggered

How can I align the content within two div elements?

Struggling to implement Datatables row grouping using ajax is proving to be quite challenging

The array used within the useEffect hook and the getCoordinates function appears to be distinct when printed with console

How can I utilize the mapping function on a promise received from fetch and display it on the page using React

Issue with font icons not displaying properly on Firefox

Encountering Internal Server Error when running Node-Express app on render.com with query parameters live

Searching for 10 random data records within a collection of 100 in MongoDB

Tips for customizing a bootstrap CSS file or incorporating it into your project

Steps to remove a specific child element using jQuery:

Having trouble resolving errors encountered while running the `npm run build` command, not sure of the steps to rectify

What is the process for retrieving values from an ajax request?

Tips for managing errors in HTTP observables

I need help converting the "this week" button to a dropdown menu. Can someone assist me in troubleshooting what I am missing?

What are the limitations of sorting by price?

Ember.js Helper that mimics an Ajax request response

Transferring information from a webpage to a popup using executeScript: A guide