Page jumping with collapsing/toggle div and adding arrows to the top of collapsed content

[toolman]

Hi there,

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:

Collapsing CSS arrows. - JSFiddle - Code Playground

[PaulOB]

@toolman

Can anyone help me with why the page is jumping when clicked on?

I assume you would be adding the data targets and collapse to the anchor along with the fragment identifier.

e.g.

<a href="#bar1" class="collapsed" data-toggle="collapse" data-target="#bar1">
<div class="panel panel-info">
  <div class="panel-heading">
    <div class="box" id="energy"> <img src="https://place-hold.it/350x350" />
      <div class="content">
        <h3 class="green">Title1 <span><i class="icons8-sun"></i>Sub title</span></h3>
        <p>Text</p>
      </div>
    </div>
  </div>
</div>
</a>

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).

[toolman]

Hi PaulOB,

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.