Leveraging the power of JavaScript to reveal concealed div elements

Question

Leveraging the power of JavaScript to reveal concealed div elements

I've got a collection of divs (five in total) with a hidden class applied to them in my CSS stylesheet. Each div also has its own unique ID. My goal is to use JavaScript to reveal these divs one by one.

Here's an example of what I'm looking for:

<style>
.hidden{
     display:none; }
</style>
<script>
function displayDiv1(){
    document.getElementById('div1').style.display = "block"; }
function displayDiv2(){
    document.getElementById('div2').style.display = "block"; }
</script>
<div class="hidden" id="div1">
<p>some stuff here</p>
</div>
<div class="hidden" id="div2">
<p>some more stuff here</p>
</div>

Check out this non-functional jsfiddle http://jsfiddle.net/DAzZT/

Is it feasible to achieve this functionality, or do I have to specify each individual div as hidden by using the ID rather than the class?

javascript css class html

Answer 1

Answer №1

The issue lies with using the getElementById function directly, instead you should use document.getElementById. It is recommended to consolidate this functionality into a single function for efficiency:

function displayElement(id) {
    document.getElementById(id).style.display = "block";
    return false;
}

To utilize this function, simply call it like so:

<a href="#" onclick="return displayElement('target_element_id');">Display Element</a>

Answer 2

The issue lies with using the getElementById function directly, instead you should use document.getElementById. It is recommended to consolidate this functionality into a single function for efficiency:

function displayElement(id) {
    document.getElementById(id).style.display = "block";
    return false;
}

To utilize this function, simply call it like so:

<a href="#" onclick="return displayElement('target_element_id');">Display Element</a>

Answer 3

Answer №2

One way to achieve this is by utilizing jQuery. By initially setting the display property in your CSS to none, you can then use jQuery functions such as $('#element').show(); to make the element visible or $('#element').hide() to hide it again.

Answer 4

One way to achieve this is by utilizing jQuery. By initially setting the display property in your CSS to none, you can then use jQuery functions such as $('#element').show(); to make the element visible or $('#element').hide() to hide it again.

Answer 5

Answer №3

give this a shot sandbox

make sure to invoke it with the document object

function showDiv1(){
document.getElementById('box1').style.display = "block";
}
function showDiv2(){
 document.getElementById('box2').style.display = "block"; 
}

Answer 6

give this a shot sandbox

make sure to invoke it with the document object

function showDiv1(){
document.getElementById('box1').style.display = "block";
}
function showDiv2(){
 document.getElementById('box2').style.display = "block"; 
}

Answer 7

Answer №4

element, ensure that your functions are placed in the appropriate scope as demonstrated in your inquiry. Utilize the document.getElementById method to access elements on the page. Adjust the onLoad setting to 'no wrap(body)' on the left side.

Answer 8

element, ensure that your functions are placed in the appropriate scope as demonstrated in your inquiry. Utilize the document.getElementById method to access elements on the page. Adjust the onLoad setting to 'no wrap(body)' on the left side.

Answer 9

Answer №5

Initially, there is a mistake in the code provided. It should be noted that the correct syntax is document.getElementById rather than getElementById.

Another error present in the fiddle is wrapping the code within an onLoad function. This leads to the JavaScript code appearing as follows:

window.addEvent('load', function() {
    function display1(){
        document.getElementById('div1').style.display = "block";
    }
    function display2(){
        document.getElementById('div2').style.display = "block"; 
    }
});

The function definitions are contained within a function, causing them to be inaccessible in the global scope. Clicking on any links will result in a Uncaught ReferenceError.

To resolve this issue, you have two options: either deselect the wrap option (select no wrap (head) or no wrap (body) from the first dropdown menu under choose framework) or add the functions to the global window object while maintaining the onLoad wrapper and adjusting your code like so:

window.display1 = function(){
    document.getElementById('div1').style.display = "block";
}
window.display2 = funnction(){
    document.getElementById('div2').style.display = "block"; 
}

Answer 10

Initially, there is a mistake in the code provided. It should be noted that the correct syntax is document.getElementById rather than getElementById.

Another error present in the fiddle is wrapping the code within an onLoad function. This leads to the JavaScript code appearing as follows:

window.addEvent('load', function() {
    function display1(){
        document.getElementById('div1').style.display = "block";
    }
    function display2(){
        document.getElementById('div2').style.display = "block"; 
    }
});

The function definitions are contained within a function, causing them to be inaccessible in the global scope. Clicking on any links will result in a Uncaught ReferenceError.

To resolve this issue, you have two options: either deselect the wrap option (select no wrap (head) or no wrap (body) from the first dropdown menu under choose framework) or add the functions to the global window object while maintaining the onLoad wrapper and adjusting your code like so:

window.display1 = function(){
    document.getElementById('div1').style.display = "block";
}
window.display2 = funnction(){
    document.getElementById('div2').style.display = "block"; 
}

Answer 11

Answer №6

Consider using document.getElementById in place of getElementById when working with JavaScript functions.

Answer 12

Consider using document.getElementById in place of getElementById when working with JavaScript functions.

Answer 13

Answer №7

Here's an easy fix :

<script>
    function showDiv(number){
       document.getElementById('element'+number).style.display = "block";
       return false;
    }
</script>
<a href="#" onclick="return showDiv(1);">Show Element 1</a><br />
<a href="#" onclick="return showDiv(2);">Show Element 2</a>

See demonstration here (I made changes to the CSS for better visibility of both elements)

Answer 14

Here's an easy fix :

<script>
    function showDiv(number){
       document.getElementById('element'+number).style.display = "block";
       return false;
    }
</script>
<a href="#" onclick="return showDiv(1);">Show Element 1</a><br />
<a href="#" onclick="return showDiv(2);">Show Element 2</a>

See demonstration here (I made changes to the CSS for better visibility of both elements)

Leveraging the power of JavaScript to reveal concealed div elements

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Encountered a SyntaxError: Unexpected token "e" while attempting to parse a JSON string

Using ESP8266 as a client and setting up an AJAX web server

What is the best way to customize the appearance of Image tags located inside SVGs, whether they are in separate files or embedded within the code

Discover the Color's Value in Relation to a Different Color

Tips for utilizing the Python class method decorator for implementing GETTER and SETTER functions

Why opt for ref.current over directly applying the condition?

Utilizing Node.js with Redis for organizing data efficiently

Is there a way to render a component without having to render AppComponent constantly?

In Node.js, when accessing a Firebase snapshot, it may return a

Sorting alphanumeric strings in React Bootstrap Table Next on a dynamic table

What is the correct way to implement checkbox validations using jQuery?

JavaScript decimal validation not functioning as intended

What is the process for implementing npm packages in Laravel after they have been successfully installed?

Ways to eliminate the final empty space in a grid

Mongoose and MongoDB in Node.js fail to deliver results for Geospatial Box query

What is the method for incorporating an async middleware into a router route?

Panel that collapses and increments its ID each time within my loop

displaying a post-end issue on the express server

Selenium for handling multiple input fields

What is the best way to position a static element next to a Vue draggable list?