Button with 2 "href’s" in php?

Question

Hi! I just created my stack accountoverflow. I’m always researching things here and learning more about programming. Well, as I’m starting now and understand very little programming, I started with a ready-made Bootstrap template (this one).

I need to make a button have 2 actions, in case, 2 "href". Why? I’m doing (editing right, I don’t know how to program yet hehe) a site for documentation of some things of the Company. I need a side menu button (sidebar) to have two actions that would be them:

1° scroll the screen down to the documentation specific section field; 2° open this section-specific field.

As I got a template ready, I’m using a function that I found very cool that is the "Collapse", so the menus are "hidden" as if it were a Spoiler, hiding the contents of that session of the document.

To sum up, scroll the screen until the session and open this "spoiler" to show the content. I will leave here 2 links of "demonstration" of how it works.

First - According to

I can make a button open the sessions using href and a ID that I give to the div where it says "Session 1", "Session 2" and so on. Example:

Div: <div id="abrirsessao"></div>

Roll to the div: <a class="collapse-item" href="#abrirsessao" data-toggle="collapse">Abrir Sessão</a>

---

I can also roll the page down using the href + ID of the div. Example:

Div: <div id="rolarsessao"></div>

To: <a class="collapse-item" href="#rolarsessao">Rolar até a sessão</a>

I believe the problem is because there is a div inside the other. If I can assign 2 "href’s", one to the #scroll and another to the #open I believe it would work.

From now on I thank anyone who can help (or try) :D

Answer 1

Below follows an example, just fit your code.

I didn’t use show/IDE but slideToggle.

Don’t forget to tag jQuery .

$(document).ready(function(){
	$('h2.accor1').click(function(){
		$(this).parent().find('div.accor1a').slideToggle("slow");
	});
  $('h2.accor2').click(function(){
		$(this).parent().find('div.accor2a').slideToggle("slow");
	});
});

h2.accordion{ cursor: pointer; }
div.accordion{ display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="exemplo">
	<h2 class="accordion accor1">Título1</h2>
	<div class="accordion accor1a">
		<p> texto de descrição </p>
	</div>
  <h2 class="accordion accor2">Título2</h2>
	<div class="accordion accor2a">
		<p> texto de descrição </p>
	</div>
</div>