I am trying to create 3 boxes which will display content in a collapsed box when clicked on.
I kind of have it working, but for some reason, the page is jumping to the top when each box is clicked because it’s using a “#”
I am also trying to have an arrow at the top of each one when it collapsed like this:
But I’m wondering if that’s a good idea as I don’t think it will work on mobile!
Can anyone help me with why the page is jumping when clicked on?
I have this fiddle of what I currently have:
I assume you would be adding the data targets and collapse to the anchor along with the fragment identifier.
<a href="#bar1" class="collapsed" data-toggle="collapse" data-target="#bar1">
<div class="panel panel-info">
<div class="box" id="energy"> <img src="https://place-hold.it/350x350" />
<h3 class="green">Title1 <span><i class="icons8-sun"></i>Sub title</span></h3>
and so on…
You can make a big arrow using :before or :after and create a square that is absolutely positioned to the top of the element (obviously you will need to change the left position for each of the three boxes). Then you just transform:rotate(45deg) the pseudo element to get the square to look like an arrow. If you overlap at the mid position it will look like an arrow.
I didn’t offer code because your fiddle doesn’t look anything like your design (e.g. I see two boxes in a line and a third underneath).
Thanks for the reply. Ah yes, I will need to add the relevant #bar-1 to the links
I take a look at my code and see what I come up with.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.