The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Getting to #anchor within an #anchor

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #236373

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

    I have url ‘’, and on the page in question I have an image slider that uses # anchors. Each slide then changes url to ‘’ – ‘’

    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 ‘’ 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 ‘’, 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.


    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.


    Thank god for CodePen;


    This is all I changed in the style : {
      top: 152px;
      left: 315px;

    And added some script to toggle this class :


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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.