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

What is the best way to customize the appearance of chosen selections in the MUI Autocomplete component?

The H1 heading sets the stage, layered behind the captivating background image

Unable to successfully submit a form using PHP

Using a ForEach iteration to loop through a table in C# and jQuery

Preventing Users from Accessing a PHP Page: Best Practices

Tips for linking together AJAX requests with vanilla JavaScript

Stop the iframe video when the modal is closed

Breaking Down the Process of Exporting a Next.js Static Website into Manageable Parts

Having difficulty saving data in database using Ajax request from a Chrome extension

Steps for referencing an autogenerated id in a Firestore collection

Tips for eliminating duplicate entries in ag grid using Angular

Looping through JSON data using jQuery's for loop

Could there be a more efficient method to enable support for all video formats?

Failure to Trigger AJAX Success Event

How can I incorporate a spinning cog from Font Awesome into a jQuery click event?

ExpressJS: How to resolve the undefined error in Express session

Transferring information to React (Native) hooks in a way similar to how it is done

Is there a solution for the continuous automatic incrementing of the jQuery UI spinner that occurs when I right-click on it?

JavaScript: Efficiently Sorting a Multidimensional Array

problem with accessing a website input area