单击显示隐藏的Div

Question

I'm looking to reveal a div when I click on a corresponding div, much like when you click on an image in Google's image search results. The row of images split, and a new area is revealed. I got pretty far with my minimal knowledge of javascript here: http://codepen.io/anon/pen/fKEgw

The basics of it works like this:

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";
});

How can I get a similar effect without being forced to set a height value? Is there a better way to code this type of thing so I'm not making duplicate divs for the mobile view? SHould I use something other than just javascript?

Thank you very much for your help!

Answer 1

If you use jquery, you can simply do, for example

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

and

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

rather than changing the heights. In plain javascript this is basically setting the 'display' css attribute to 'none' to hide it and then back (default is 'block').

edit:

Also, if you modify the html so that the divs are 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, you could replace all the separate event handler attaching code with the following:

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

There may be a cleaner way to get the appropriate reveal div than to resort to adding the reveal attribute, but the idea is to make it so you can determine what you need based on the clicked div without the code knowing exactly which div was clicked.

Answer 2

I agree that if the project is large you might be better off with JQuery, see thogue's excellent answer. If you want to stay with plain Javascript you can certainly clean it up a little 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";
      }
   }

};

and then

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

as needed.