CODEWITHSUNDEEP
jquerycsshyperlinkhideshow
JU1CY
JU1CY

Reputation: 123

jquery show/hide Div with direct link

Kidnly help me to finish it :)

So i have this kind of simple SHOW/HIDE content with jquery, but problem is getting it shown with direct link.

works simple, like i like. But i need some way to show it with example.php#div1 or example.php#div2

Any suggestion?

e.preventDefault();
var targetDiv = $($(this).attr('href'));
if(!targetDiv.is(':visible')){
    $('.page').slideUp();
    targetDiv.slideDown();
}else{
    $('.page').slideUp();
}

});

Thanks in advance!

Upvotes: 0

Views: 327

Answers (3)

Smeegs
Smeegs

Reputation: 9224

I'm not sure if this is what you're looking for. But you can add a hash listener

onhashchange

Here is a fiddle that I created that looks at the hash part of the url rather than listening to the click event.

FIDDLE

window.addEventListener("hashchange", function(){    
    var targetDiv = $(location.hash);
    console.log(targetDiv);
    if(!targetDiv.is(':visible')){
        $('.page').slideUp();
        targetDiv.slideDown();
    }else{
        $('.page').slideUp();
    }
}, false);

I'm not sure if this will fire on the first load, but on the load event you can check for location.hash to see if one exists.

Upvotes: 1

joews
joews

Reputation: 30330

You can do it in pure CSS. This example uses a slide from left transition. You could change the translate transform or use another property like opacity for another effect, or just change the display property for no animation.

HTML:

<a href="#div1">Show div1</a>
<div id="div1">1</div>

<a href="#div2">Show div2</a>
<div id="div2">2</div>

CSS:

div {
  transform: translate(-200px);
  transition: transform 400ms ease;
}

div:target {
  transform: none;
}

http://jsfiddle.net/jwhitfieldseed/xf76pgt0/

Upvotes: 1

Jozef D&#250;c
Jozef D&#250;c

Reputation: 963

Send get parameter in url for example

example.php?div_to_hide=1

and in javascript do this

var targetDiv = $('#div<?php echo isset($_GET['div_to_hide']) ? $_GET['div_to_hide'] : "" ?>');

Upvotes: 0

Related Questions