Bootstrap collapse brokes with image as header

Question

I use bootstrap 3.3.6, ui-bootstrap 1.2.2 and I try to use collapse. The header has to be an image. This is my code

 <div id="isOpen"  > 
    <img data-toggle="collapse" data-target="#readThis" src="./images/hello.jpg" /> 
    <div id="readThis" > Get more info</div>

 </div>

The readThis div appears opened and when I click the image to close it, it starts to close, and then re-opens.

After that works fine.

How do I fix this? Is there another bootstarp module that will work with images? I try to fix this all day, please help.

Thanks

score 1 · Answer 1 · answered Apr 01 '16 at 10:28

1

try by putting data-toggle="collapse" data-target="#readThis" on <a> tag and put image inside it

<a href="#readThis" data-toggle="collapse">
   <img src="./images/hello.jpg" />
</a>

answered Apr 01 '16 at 10:28

Ismail Farooq

6,309
1
27
47

yes, but, since this is a single-page application, when I hit that `` it tries to go to the `#readThis` page, and it redirects to nowhere. Any tips? – slevin Apr 01 '16 at 10:30
yeah do – Ismail Farooq Apr 01 '16 at 10:32
use javascript:; or javascript:void(0) inside href see here http://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean – Ismail Farooq Apr 01 '16 at 10:33
Looks really good, I will fix m page and test it and let you know. Thanks – slevin Apr 01 '16 at 10:42

Bootstrap collapse brokes with image as header

1 Answers1