Jump to content
01Moonlight

Link to html accordion panel

Recommended Posts

Give paragraph or span surrounding the word a id ref. Then give a link a href attribute a value to that id ref beginning with hash '#' href="#idrefvaluename"

Share this post


Link to post
Share on other sites

Hi Dsonesuk would that be something like <p><span id="firstlocaiton">My</span>the rest of my paragraph</p> Then where I want to link from: <a href="firstlocation">click here to see the first location</a>

Is this correct?

Share this post


Link to post
Share on other sites

With a hash at the beginning

	< a href="#firstlocation">click here to see the first location</a>
	

Obviously these have to be in the same accordian panel to work without JavaScript.

Share this post


Link to post
Share on other sites

That's the problem. I have the link in another page that needs to go to the accordion file. How can I do that? I've looked at some java script from other sites but it's either for bootstrap or an accordion created using js. 

Share this post


Link to post
Share on other sites

I looked at the links, but I'm still not sure how that's going to open a panel on another page. I've done what you suggested earlier and it links to the correct page, but does not open the panel.

Share this post


Link to post
Share on other sites

You use the url to that accordion effect with the bookmark hash

< a href="theurloftheepageyouwanttogoto.html#firstlocation">click here to see the first location</a

https://www.w3schools.com/code/tryit.asp?filename=FZA3F31CHH20

paste above code in place of what's here

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion_active

Now in the address bar add #bookmarkword to the end of url and press enter. This will represent the url with hash link from another page.

Hit run

Change hash to #bookmarkpara

Hit run.

it identifies where the bookmark is! transverses up the parent element containers <p>...</p>, <section>...</section>, <article>...</article> till it reaches a div element, set in the while loop condition. It takes the div elements id and runs the myFunction() using that id as a paremeter.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...