CODEWITHSUNDEEP
htmlcssanchor
Tyharo
Tyharo

Reputation: 383

Prevent Anchor From Jumping to Internal Link

I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page. Example:

<div id="tab-1"><a href="#tab-1" class="tab">502-831</a>

I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.

http://jsfiddle.net/1pjudu4j/4/

Upvotes: 0

Views: 177

Answers (2)

Mike Feng
Mike Feng

Reputation: 833

Since you are using Joomla, replace:

<a href="#tab-1" class="tab">502-831</a>

with:

<a href="<?php echo JUri::current();?>#tab-1" class="tab">502-831</a>

Upvotes: 0

SparoHawk
SparoHawk

Reputation: 557

I added this line code of CSS to your example and it worked as intended.

.accordion div:blur .content {
    display: none;
}

Do play around with your CSS with this in mind.

Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.

Upvotes: 1

Related Questions