Symphony.

I stated using Symphony a week ago, and so far i absolutely love it. I'm working on a very simple academic website.

So here's the problem - When a link that includes an anchor to a list element is clicked, a class (.active) should be set to that list element so the hidden content will become visible:

{$root}/course/{$course}/{$resource}/#126 or {$root}/course/{$course}/#126

should cause this to happen with the code: <li id="#126" class="active"> <a href="#126">Academic Advisement</a> <span class="info"> -----hidden stuff will become visible---- </span> </li>

You can view the site live here: http://dev.iyodesigns.com/sym1/

Because the server (so Symphony) can't see anything behind the hash (#), you have to use JavaScript to show the applicable elements. You have to run the JavaScript on page load and when you click the links on the page itself, because the page won't reload. You get the URL in JS with window.location, and your id-attribute probably should be 126 and not #126.

your id-attribute probably should be 126 and not #126.

Actually, neither of these. id attributes can not start with a numerical value. :)

But yes, javascript is the correct answer. If you use jquery, it should be as simple as:

$('ul li').click(function() {
    $('ul li').removeClass('active').children('.info').hide();
    $(this).addClass('active').children('.info').show();
});

Actually, neither of these. id attributes can not start with a numerical value. :)

I was thinking in HTML5 :-) "The id attribute just got more classy in HTML5"

Interesting.. I wasn't aware of that change, thanks for the heads up!

Thanks for pointing me in the right direction! This is what I ended up using:

<script type="text/javascript"> $(document).ready(function(){ var hash = window.location.hash.substr(1); $('.pri li').removeClass('active'); if(hash != false) { $('.pri li#'+hash+'').addClass('active') };
$('.pri .block ul li').mousedown(function(event) { var hash = window.location.hash.substr(1); var $this = $(this); if(hash != false) { $('.pri .block ul li').removeClass('active'); $($this).addClass('active') } }) }); </script>