Getting to #anchor within an #anchor

[Sammy5]

Not a pro here, so is gonna be kind of difficult to explain my problem….

I have url ‘http://mysite.com/site’, and on the page in question I have an image slider that uses # anchors. Each slide then changes url to ‘http://mysite.com/site#slide-one’ – ‘http://mysite.com/site#slide-five’

OK, so far so good. Image slider looks great, all things going fine, that is until I added a top/header menu bar, then wished to have each element ‘offscreen’ until targeted. So in my CSS I have;

div#block1 { display:none; }
div#block1:target { display:block }

div#block2 { display:none; }
div#block2:target { display:block }

div#imageslider1 { display:none; }
div#imageslider1:target { display:block }

Now, each ‘hidden’ block when targeted changes the url to ‘http://mysite.com/site#block1’ for example. Now here is my problem (think most of you know where this is going :) ….

If I put my image slider in a hidden block, I can get that slider to first appear just fine. Is when I click on the next slide the slider of course vanishes. Before I go further, I really need to stress…I can use HTML/CSS, no javascript, jquery, java, flash, AJAX, etc…

I can get to ‘http://mysite.com/site#imageslider1’, but I would need get to “#imageslider1#slide-one” essentially, which is not possible. Since “imageslider1” only appears when it is targeted. I hope this makes some sense to someone, I never learned any of this formally, just picked some stuff up over the years and fiddling around learned how to use examples I found off sites like this, but am not knowledgeable to overcome a problem like this. I am 99% certain I am going to be told “have to use javascript”, but I thought at least give it a try.

p.s. If there is any chance of a solution without jquery and posting full code to the page here, can do that.

[Shikkediel]

I think I mostly get it but a small demo would be very helpful here nonetheless…

A tiny bit of vanilla JS to toggle visibility of the three main blocks would probably be easiest though, to ‘free up’ the :target selector.

[Sammy5]

Thank god for CodePen; http://codepen.io/anon/pen/LGxdNL

[Shikkediel]

This is all I changed in the style :

div#image-slider1.active {
  top: 152px;
  left: 315px;
}

And added some script to toggle this class :

Demo

Should work for any link at the top with a matching anchor element…

[Author]

Posts