0

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!

2
  • Please show example.php. Both div1 and div2. I'm not sure what you're referring to. Your question is also very vague. What do you mean "getting it shown with direct link"?
    – Nicolas
    Aug 19, 2014 at 17:46
  • @Nicolas I believe Aleksandr means to trigger a click event on the hashbang value in the URI. An elegant/simple example seen here: stackoverflow.com/questions/11895681/… Duplicate? Aug 19, 2014 at 17:49

3 Answers 3

1

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.

2
  • Yeah, looks exactly what i need! Cheers!
    – JU1CY
    Aug 19, 2014 at 18:06
  • Just noticed one thing, whn it comes to hidden div height over 100px and DIV1 is opened, you're clicking to open DIV2 is works... well not so "pretty" is there any chance to make it work. So once you click another DIV to open it first closing opened one and than opening next one?
    – JU1CY
    Aug 19, 2014 at 19:41
1

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/

1
  • Yeah, looks like what i need, but there is one problem square is fixed and each having it's place, so in ma case of having 4 DIVS are are transporent, but not hidden...
    – JU1CY
    Aug 19, 2014 at 18:03
0

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'] : "" ?>');
1
  • php is what i have right now, but it's not exit, i'm trying to do it with jquery...
    – JU1CY
    Aug 19, 2014 at 17:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.