Loading...

Search jQuery

Search

jQuery Forum

JQuery Expand / Collapse but with hyperlink

in Using jQuery • 8 years ago

Hello,

I am using the following code to expand/collapse some text, it works great. However the user wants to be able to send a link to someone so it automatically expands that article e.g. http://website.com/news/variableNews1 or http://website.com/news/variableNews2

Not sure how to do this, was thinking of using anchors but not sure how to make it expand that way, thank you for the help.

HTML:

<div class="heading"><h1>News 1</h1></div>

<div class="expandable"><p>Text goes here</p></div>

<div class="heading"><h1>News 2</h1></div>

<div class="expandable"><p>Text goes here</p></div>

JavaScript:

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery(".expandable").hide();

jQuery(".heading").click(function()

{

jQuery(this).next(".expandable").slideToggle(500);

});

});

</script>

1

Replies(2)

kbwood.au

Re: JQuery Expand / Collapse but with hyperlink

8 years ago

Give each heading div an ID:

<div class="heading" id="news1"><h1>News 1</h1></div>
<div class="expandable"><p>Text goes here</p></div>
<div class="heading" id="news2"><h1>News 2</h1></div>
<div class="expandable"><p>Text goes here</p></div>

Pass the required ID as an anchor on the URL:

http://website.com/news/variableNews#news2

And add the jQuery code to activate it:

jQuery(document).ready(function($) {
$('div.expandable').hide();
$('div.heading').click(function() {
$(this).next('div.expandable').slideToggle(500);
});
$(location.hash).click();
});

Re: JQuery Expand / Collapse but with hyperlink

8 years ago

Thanks that worked great :)