When Click Image Dropdown div full width using javascript

Question

I am working on a site where i need to click on an image and when i do so another section (div) appears underneath the image with different content... I don't really know how to achieve this, maybe someone out there can help me out! I'm using a bootstrap template: The example page is linked at the Bottom. What i want to do is when onClick a Portafolio Item to dropdown a section or container but full width not just underneath the Image.

http://preview.oklerthemes.com/porto/4.9.2/portfolio-grid-full-width.html

Thanks in advance

Welcome to SO. Please visit the [help] and take the [tour] to see why your question is off topic. HINT: Post effort and code — mplungjan, Oct 10 '16 at 11:03
could you please share what you have achieve till now? what do you mean by you want to see section? — Pirate, Oct 10 '16 at 11:03
@Pirate im using a bootstrap template [link](http://preview.oklerthemes.com/?theme=Porto) This section is a portafolio Section and i would like to onclick dropwon a div container or section with more selection to choose from — Alva, Oct 10 '16 at 12:03

score 0 · Answer 1 · answered Oct 10 '16 at 11:04

0

Maybe you can find your answer here, http://www.w3schools.com/css/css_dropdowns.asp . U can even try it out yourself :).

answered Oct 10 '16 at 11:04

Mr.thatguy

108
1
1
8

Please post code as answer. not links. Visit the [help] and see how to answer. I will not vote you down, but others might. W3schools is not considered a great JS reference either – mplungjan Oct 10 '16 at 11:19

score 0 · Answer 2 · answered Oct 10 '16 at 11:08

Try this, hope it will help.

function showSection(){
  document.getElementById("section").style.display="inline";
}

#section{
  display:none;
 }

<html>
  <body>
    <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="image here" onclick="showSection()">
        <div id="section">
         <h1>Here go your section.</h1>
          You can write your code here.
          
        </div>
  </body>
</html>

score 0 · Answer 3 · edited Oct 10 '16 at 11:20

This is the easiest solution I can think of.

var img = document.querySelector('.imgClass');
var content = document.querySelector('.contentClass');

img.addEventListener('click', function() {
  content.style.display = 'block';
});

.imgClass {
  background: red;
  width: 20px;
  height: 20px;
}
.contentClass {
  display: none;
}

<div class="imgClass"></div>
<div class="contentClass">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi totam labore facilis molestiae error nulla, ipsa dolorum eligendi odio voluptatem ducimus doloremque eaque, veritatis iusto. Magnam asperiores rerum, sed explicabo.
</div>

I advice using onclick on such a simple thing instead of the not cross browser addEventListener — mplungjan, Oct 10 '16 at 11:21

When Click Image Dropdown div full width using javascript

3 Answers3