Unveil Secret Divs with a Click

Question

Unveil Secret Divs with a Click

I am in search of a way to display a hidden div when I click on a specific div, similar to the expanding images feature in Google's image search results. I have made progress with my limited knowledge of javascript, as shown in this CodePen: http://codepen.io/anon/pen/fKEgw

The basic functionality is achieved through the following code:

document.getElementById("a-section").addEventListener("click", function () {
document.getElementById("a-reveal").style.height = "300px";
document.getElementById("b-reveal").style.height = "0px";
document.getElementById("c-reveal").style.height = "0px";
document.getElementById("d-reveal").style.height = "0px";
document.getElementById("e-reveal").style.height = "0px";
document.getElementById("f-reveal").style.height = "0px";
document.getElementById("g-reveal").style.height = "0px";
document.getElementById("h-reveal").style.height = "0px";
});

I am seeking a more efficient method to achieve the same effect without explicitly setting height values. Is there a better approach to coding this functionality so that duplicate divs are not required for mobile view? Should I consider using something other than just javascript?

Your assistance is greatly appreciated!

javascript jquery html css

Answer 1

Answer №1

If you're using jQuery, a simple way to show and hide elements is by using the following code:

$("#a-reveal").show();

and

$("#b-reveal").hide();

instead of adjusting their heights. In plain JavaScript, this involves changing the 'display' CSS attribute to 'none' to hide the element and then back to 'block' (default display).

edit:

Another approach is to modify the HTML structure like this:

<div id="a-section" class="section" reveal="a-reveal">
....

<div id="a-reveal" class="reveal">

where "reveal" contains the ID of the associated reveal div. This allows you to simplify event handling with the following code snippet:

// Attaches an event to every div with class "section"
$(".section").click(function(){
    $(".reveal").hide();
    var thisRevealID = $(this).attr("reveal");
    $("#"+thisRevealID).show();
});

There may be a more efficient way to access the appropriate reveal div without adding the reveal attribute. The goal is to dynamically determine the action based on the clicked div without hardcoding specific IDs into the script.

Answer 2

If you're using jQuery, a simple way to show and hide elements is by using the following code:

$("#a-reveal").show();

and

$("#b-reveal").hide();

instead of adjusting their heights. In plain JavaScript, this involves changing the 'display' CSS attribute to 'none' to hide the element and then back to 'block' (default display).

edit:

Another approach is to modify the HTML structure like this:

<div id="a-section" class="section" reveal="a-reveal">
....

<div id="a-reveal" class="reveal">

where "reveal" contains the ID of the associated reveal div. This allows you to simplify event handling with the following code snippet:

// Attaches an event to every div with class "section"
$(".section").click(function(){
    $(".reveal").hide();
    var thisRevealID = $(this).attr("reveal");
    $("#"+thisRevealID).show();
});

There may be a more efficient way to access the appropriate reveal div without adding the reveal attribute. The goal is to dynamically determine the action based on the clicked div without hardcoding specific IDs into the script.

Answer 3

Answer №2

Indeed, for larger projects, opting for JQuery might be a better choice as highlighted in thogue's fantastic response. However, if you prefer sticking to pure Javascript, there is the option to tidy up the code a bit:

var reveal_func = function(section){
   var arr_a = new array("a-reveal","b-reveal","c-reveal");
   for (var i=0; i<var_a.length; i++){
      if (arr_a[i] === section){
          document.getElementById(arr_a[i]).style.height = "300px";
      }else{
         document.getElementById(arr_a[i]).style.height = "0px";
      }
   }

};

After that, you can add:

document.getElementById("a-section").addEventListener("click", reveal_func("a-reveal"))
document.getElementById("b-section").addEventListener("click", reveal_func("b-reveal"))

as required.

Answer 4

Indeed, for larger projects, opting for JQuery might be a better choice as highlighted in thogue's fantastic response. However, if you prefer sticking to pure Javascript, there is the option to tidy up the code a bit:

var reveal_func = function(section){
   var arr_a = new array("a-reveal","b-reveal","c-reveal");
   for (var i=0; i<var_a.length; i++){
      if (arr_a[i] === section){
          document.getElementById(arr_a[i]).style.height = "300px";
      }else{
         document.getElementById(arr_a[i]).style.height = "0px";
      }
   }

};

After that, you can add:

document.getElementById("a-section").addEventListener("click", reveal_func("a-reveal"))
document.getElementById("b-section").addEventListener("click", reveal_func("b-reveal"))

as required.

Unveil Secret Divs with a Click

Answer №1

Answer №2

Similar questions

Retrieve information about a parent's data related to child events in Vue.js

Creating a link button using JavaScript

Discovering the window.scrollTop, ScrollY, or any other distance value while utilizing CSS scroll snap can be achieved by following these

Trouble aligning CSS UL/LI menu in the center

Encountering a WriteableDraft error in Redux when using Type Definitions in TypeScript

Create a configuration featuring filter options similar to Notion's functionality

Codeigniter displays a view with an empty variable

Error message thrown by node express.js indicating that response headers cannot be reset once they have been sent

Echo result triggers a color change in the table cell

What is the best way to position Scroll near a mat row in Angular?

Dynamic creation of HTML/Ionic checkbox leads to ng-change not binding properly

What is the best way to create square editor tabs in Eclipse without using swt-border-radius?

conceal selected input during ajax request

Math operations limited by boundaries: adding and subtracting

Increase the size of the textarea when it is clicked on and revert back to its original size when it

Retrieving information from a PHP script with the help of the $.get method

What is the best way to send an array from ajax to php?

Storing the path of a nested JSON object in a variable using recursion

Displaying Errors from Controllers in React Hook Forms

What is the process for testing and executing the code I've written on ACE Cloud 9?