Expand/collapse a Div by clicking on an image

Question

I added the following code to expand/collapse a Div by clicking on an image. this works well, but one problem is that the Div is shown by default, and I need to change the JS code, so that, the Div will be hidden by default, and only become visible when clicking on the image. If possible, please also help me on how to adjust the speed in which the Div expands or collapse.

function toggle5(showHideDiv, switchImgTag) {
  var ele = document.getElementById(showHideDiv);
  var imageEle = document.getElementById(switchImgTag);
  if (ele.style.display == "block") {
    ele.style.display = "none";
    imageEle.innerHTML = '<img src="https:/PublishingImages/env3.png">';
  } else {
    ele.style.display = "block";
    imageEle.innerHTML = '<img src="Supplier_Compliance/PublishingImages/env3.png">';
  }
}

<div id="headerDivImg">
  <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');">
    <img src="https://teams.connect.te.com/sites/BPDev/PublishingImages/attention1.jpg">
  </a>
</div>
<div id="contentDivImg" style="display: block;">This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.</div>

use `display: none` instead of `display: block` for default hidden div and use `transition` in CSS to adjust the speed in which the Div expands or collapse — Aakash Martand, May 24 '19 at 08:51
Thanks for your quick answer. i made the change and it works as expected! would you please also explain how to use transition in CSS to adjust the speed? — T Zhang, May 24 '19 at 09:08

score 0 · Answer 1 · answered May 24 '19 at 09:19

You shouldn't use HTML attributes such as style or onclick, etc. They're ancient and discouraged for multiple reasons. Read this (about onclick) and this (about style)

Use an EventListener instead.

To hide the div per default, use display: none. Don't use the style attribute as explained above. Either use a seperate CSS file or the style tag instead.

function toggle5(showHideDiv, switchImgTag) {
  var ele = document.getElementById(showHideDiv);
  var imageEle = document.getElementById(switchImgTag);
  if (ele.style.display == "block") {
    ele.style.display = "none";
    imageEle.innerHTML = '<img src="https:/PublishingImages/env3.png">';
  } else {
    ele.style.display = "block";
    imageEle.innerHTML = '<img src="Supplier_Compliance/PublishingImages/env3.png">';
  }
}

// Add the EventListener to your element that toggles the div
document.getElementById('imageDivLink').addEventListener('click', () => toggle5('contentDivImg', 'imageDivLink'));

#contentDivImg {
  display: none;
}

<div id="headerDivImg">

  <a id="imageDivLink"><img src="https://teams.connect.te.com/sites/BPDev/PublishingImages/attention1.jpg"></a>
</div>
<div id="contentDivImg">This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your
  div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus
  images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his
  demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.</div>

Regarding a transition on your collapsing div, you might want to read this article about transitions, the docs, and how to apply transitions / animations to an element with JavaScript.

score 0 · Accepted Answer · answered May 24 '19 at 10:00

If you use Jquery then you will be able to do it easily and you will be able to adjust the speed of expanded and collapsed div.

First of all Add Jquery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Add you HTML..

<a id="imageDivLink">

   <img height="100" src="https://visualpharm.com/assets/552/Expand-595b40b65ba036ed117d1be8.svg"> 

</a>


<div id="contentDivImg">

This demo uses plus and minus images for hiding and showing  your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your.

</div>

Add jquery code inside your body tag.

$(document).ready(function(){ 

    $("#imageDivLink").click(function(){

       $( "#contentDivImg" ).slideToggle( "slow", function() {
         // Animation complete.
       });

   });
});

Expand/collapse a Div by clicking on an image

2 Answers2