Double targeting issue, Links target accordion, but I also need to switch style on a button Options

[Nightshade]

This is my first post here. I posted this issue on a swedish forum for webdevelopment but didn't get much attention so hopefully I will get more luck here.

My issue is this:
I have a vertical accordion that displays my content - placed underneath my navigation bar. The sections in said accordion is targeted by buttons on my navigation menu via fragment identifiers (#acc1, #acc2, etc). You can see a working example of this on this jsFiddle:
http://jsfiddle.net/RVNkC/2/

As you can see, clicking the buttons toggles the states of my accordion sections. Height is 100% (thanks to absolute positioning and top/bottom: 0px) without any stuttering.

Anyway, those images in the navigation are rollover images and what I want to do is to change the rollover state when one button is clicked. Changing the rollover state via the psuedo-classes :hover and :active was easy, and as you can see I've already implemented that in the code example above. But here is the problem: The pseudo-class :active is not enough. When a button is clicked I want the state to STICK and not go away when the user releases the mouse button. And in order to change the rollover state when I CLICK a button, I need to set up multiple targets for those buttons. One that targets the accordion - opening up the content as it does now - and one that targets the actual button being clicked, changing the rollover state via CSS :target.

According to http://www.webmaster-a.com/css-target-sele...ds-tutorial.php it's possible to target multiple elements if you do it via a class.

So what changes do I need to do to my code in order to make this happen?

Thanks in advance.

[pandy]

Sounds like a job for JavaScript.

[Nightshade]

I want to avoid javascript altogether. To me it just has a history of being a clumsy language in web development.
But considering that my website is fully operational atm (and validates HTML5 and CSS3) I guess I could use it if everything else fails!

[pandy]

I think you are wrong about JavaScript. Everything can be misused or used in a clumsy way, not least CSS.

There are CSS hacks though, like the checkbox hack, if you must. I don't know how well it works, last I looked, not very.
http://css-tricks.com/the-checkbox-hack/

[Christian J]

You can do it with CSS if the links are e.g. subsequent siblings to the section elements:

CODE

<style type="text/css" media="screen">
section:target {background: pink;}
section:target+a {background: lime;}
</style>

<section id="foo">foo section</section>
<a href="#foo">foo link</a>

<section id="bar">bar section</section>
<a href="#bar">bar link</a>

Then you just need to position all the link elements together as a nav menu...

Edit: OTOH the HTML structure above isn't very meaningful without CSS, since internal links are normally meant to be placed far apart from their targets. Only non-CSS related use I can think for the above would be to help users bookmark target elements.

This post has been edited by Christian J: Jul 23 2013, 09:46 AM

[Christian J]

I think you are wrong about JavaScript. Everything can be misused or used in a clumsy way, not least CSS.

True. Also keep in mind older browsers will not support the :target selector.

There are CSS hacks though, like the checkbox hack, if you must. I don't know how well it works, last I looked, not very.
http://css-tricks.com/the-checkbox-hack/

Nifty!

[Nightshade]

I want to avoid javascript altogether. To me it just has a history of being a clumsy language in web development.
But considering that my website is fully operational atm (and validates HTML5 and CSS3) I guess I could use it if everything else fails!

I wouldn't call it a "hack" because it's fully functional in HTML5/CSS3 - I've tried demo examples of that myself and yea, I think it's really clever.
I might have to try that solution but then that would mean re-writing half my stylesheet and that's just a pain in the A.

You can do it with CSS if the links are e.g. subsequent siblings to the section elements:

CODE

<style type="text/css" media="screen">
section:target {background: pink;}
section:target+a {background: lime;}
</style>

<section id="foo">foo section</section>
<a href="#foo">foo link</a>

<section id="bar">bar section</section>
<a href="#bar">bar link</a>

Then you just need to position all the link elements together as a nav menu...

Edit: OTOH the HTML structure above isn't very meaningful without CSS, since internal links are normally meant to be placed far apart from their targets. Only non-CSS related use I can think for the above would be to help users bookmark target elements.

I don't understand what you mean by "subsequent siblings to the section elements", but it sounds like the thing that I already have (see the jsfiddle link in the OP).
<li><a href="#acc1" class="button1"></a></li> is how every list element looks like.
<section id="acc1"> is how every section of my accordion looks like. And all of that works.

What I can't figure out is how I can target the anchor elements too so that I can perform my CSS-rollover.
#acc1:target doesn't work
#navigation > li:target > a doesn't work either

...and I've tried re-writing the selector -part of those targets in a gazillion different ways and it never works.

This post has been edited by Nightshade: Jul 23 2013, 10:30 AM

[pandy]

It's a hack and you have to misuse HTML to accomplish it.

[Nightshade]

It's a hack and you have to misuse HTML to accomplish it.

Please ellaborate.
I've downloaded one such accordion menu and I ran it through the HTML5 and CSS3 validators and there is nothing wrong with it.
jsfiddle: http://jsfiddle.net/RVNkC/2/

[Christian J]

This is my first post here.

Sorry for belated welcome!

I posted this issue on a swedish forum

[pandy]

Turn off CSS and it should be obvious. The same arguments that were used against table layouts could be used against this, or most of them anyway. Only a table based page doesn't break without CSS.

I'm not against using it, but it's wrong to think everything CSS is good, better than doing it another way. One of the strongest arguments for CSS was the separation of structure and style. The HTML should be able to stand alone. Clean, neat and well-structured. If you have to rebuild, extensively add to or misuse the structure you haven't really accomplished this.

If you just look at the effect, sure, it's neat as h*ll and it's ever so clever.

[Christian J]

I don't understand what you mean by "subsequent siblings to the section elements",

I meant that each link must be a sibling of its associated SECTION element in the HTML source (they don't necessarily have to be adjacent siblings, though). That way you can use selectors like

CODE

section:target+a {background: lime;}

(which styles a link that's a sibling of a targetted SECTION element).

it sounds like the thing that I already have

In your example the link and SECTION elements don't have any structural relationship that (AFAIK) can be used by CSS.

[Nightshade]

it sounds like the thing that I already have

In your example the link and SECTION elements don't have any structural relationship that (AFAIK) can be used by CSS.

Yea I guess that's the main issue here. Because the button and the accordion are completely separate (i.e. no structural relationship) I can't fix this with any CSS selectors

So I tried fixing it with javascript (by setting focus to the clicked element and having a CSS declaration for the :focus of the element) and can't get it working that way either:

CODE

<ul id="navigation">
    <li><a href="#acc1" class="about" onlick="document.getElementIdByClass('about).focus();"></a></li>
    ...rest of the list tags
</ul>

#navigation a.about:focus { otherStyle }

I can live with a javascript solution because my site runs even with jscript turned off so. But yea, the above is not working.
What am I doing wrong?

This post has been edited by Nightshade: Jul 23 2013, 02:31 PM

[Christian J]

Yea I guess that's the main issue here. Because the button and the accordion are completely separate (i.e. no structural relationship) I can't fix this with any CSS selectors

I had an idea about using attribute selectors:

CODE

a[href$=:target] {...}

but it doesn't seem to work either.

So I tried fixing it with javascript (by setting focus to the clicked element and having a CSS declaration for the :focus of the element) and can't get it working that way either:

Opera supports the :focus pseudo-class even without javascript, but not my other browsers.

Here's a script that relies on the onhashchange event, an event which newer browsers seem to support:

CODE

<style type="text/css" media="screen">
a.current {color: black; background: yellow;}
</style>

<ul id="navigation">
    <li><a href="#acc1" class="button1"></a></li>
    <li><a href="#acc2" class="button2"></a></li>
    <li><a href="#acc3" class="button3"></a></li>
    <li><a href="#acc4" class="button4"></a></li>
    <li><a href="#acc5" class="button5"></a></li>
    <li><a href="#acc6" class="button6"></a></li>
</ul>

<script type="text/javascript">
var a=document.getElementById('navigation').getElementsByTagName('a');
window.onhashchange=function()
{
    for(var i=0; i<a.length; i++)
    {
        a[i].className=a[i].className.replace(' current','');
        if(a[i].getAttribute('href')==location.hash)
        {
            a[i].className+=' current';
        }
    }
}
</script>

To support older browsers you could use the onclick event instead of onhashchange, but then the link styling won't sync when you use the browsers Back/Forward buttons (still buggy in my IE9), or load the page from a link or bookmark. You could also use a timer that checks the URL hash every second or so.

[Nightshade]

Doesn't appear to work.
I just want something simple along the lines of this:

CODE

<ul id="navigation">
<li><a href="#acc1" class="about" onClick="activeButton1()"></a></li>
... rest of the elements
</ul>


Javascript pseudo-code:

function activeButton1() {
document.getElementByClassName("button1").style.background-position = "right top";
}

x5 other functions (one for each button)

...but then reloading the page would simply reset the button1 (and the other buttons) to the original class declaration.
(Or instead of editing css attributes individually, the JS could just switch out the class - or the ID - of the clicked anchor tags. But then I guess the same problem remains on page reload?)

This post has been edited by Nightshade: Jul 23 2013, 06:39 PM

[Christian J]

Doesn't appear to work.

Work for me, even on the jsfiddle page. You may have to change the .current link CSS to something else though.

...but then reloading the page would simply reset the button1 (and the other buttons) to the original class declaration.

Seems the onhashchange event doesn't fire on page load after all (which makes sense, now that I think about it), despite firing when you change the URL in the address field and press the Enter key. Here's a modified version of the script that fires both on hash change and page load:

CODE

<script type="text/javascript">
function current_link()
{
    var a=document.getElementById('navigation').getElementsByTagName('a');
    for(var i=0; i<a.length; i++)
    {
        a[i].className=a[i].className.replace(' current','');
        if(a[i].getAttribute('href')==location.hash)
        {
            a[i].className+=' current';
        }
    }
}
window.onhashchange=current_link;
current_link();
</script>

[Christian J]

You can see a working example of this on this jsFiddle:
http://jsfiddle.net/RVNkC/2/

You use separate class names and CSS rules for each link, even though they all seem to use the same styling. This complicates things, for no reason AFAICS. Try simplifying it (something like this, roughly):

CODE

<ul id="navigation">
<li><a href="#acc1" class="button"></a></li>
<li><a href="#acc2" class="button"></a></li>
...

#navigation a.button {
    background: url(http://img13.imageshack.us/img13/3088/vesy.png);
    background-position: left top;
}

#navigation a.current,
#navigation a.button:hover,
#navigation a.button:active {
    background-position: right top;
    overflow: hidden;
}

(You could probably remove the link classes altogether, since the #navigation ID should suffice for identifying the nav menu links.)

Also note that my javascript is placed after the nav menu HTML, which may not be possible in jsfiddle (where scripts seem to be placed in the HEAD section automatically). If you want the script somewhere else (like in HEAD) you need to use an onload event in order to call the current_link() function when the page is loaded.