Using location.hash to activate jquery toggle/slideToggle

Question

I have a list of a list that uses jquery toggle and slideToggle so that when items are clicked on, explanatory text slides out and the class changes on the h3. The html for the items looks like:

<li><h3><a href="#" target="_blank" id="feature1" name="feature1">What do I know about javascript?</a></h3>
<div class="check_list_wrap feature1">Not a lot, apparently.</div>
</li>

I included the jquery files and then write this in the header:

<script type="text/javascript">
    $(function() {  
    $("#listfeatures h3 a").toggle(function(){
        $(this).addClass("check_list_selected");
    }, function () {
        $(this).removeClass("check_list_selected");
    });
        $("#listfeatures h3 a").click(function() {
            $("."+this.id).slideToggle('fast');
                return false;
        });
    });    
</script>

This makes it so that if a link is clicked on, it will toggle the class change of the h3, the display:block/display:inline and the sliding out of the div. It works fine.

BUT, now I want it so that with a url like index.php#feature1, the toggling for that list item will be activated as if it'd been clicked on. I know I need to use location.hash but I'm not sure how to do that. Where should I start?

I'm pretty sure you need to respond to the `onload` event so that new clicks will register something for your script to respond to. The trick is that the page doesn't really reload, but you still get the event. — ErikE, Jul 15 '11 at 00:35

Digital Plane · Accepted Answer · 2011-07-15T00:32:28.733

1

location.hash contains everything in the URL including and after the hash (#) mark. So, if went to index.php#feature1 and wanted the div with id "feature1" to show on load, you could do

$(document).ready(function() {
    if(location.hash) {
        var id = location.hash.slice(1);    //Get rid of the # mark
        var elementToShow = $("#" + id);    //Save local reference
        if(elementToShow.length) {                   //Check if the element exists
            elementToShow.slideToggle('fast');       //Show the element
            elementToShow.addClass("check_list_selected");    //Add class to element (the link)
        }
    }
});

edited Jul 15 '11 at 00:32

answered Jul 14 '11 at 22:33

Digital Plane

37,354
7
57
59

this works fine except that the class on the h3 hasn't changed. How can I do that? – pg. Jul 14 '11 at 23:29
Just add `$("."+id).addClass("check_list_selected");` in the body of the if. I'll edit the answer. – Digital Plane Jul 14 '11 at 23:38
That changes the class on the check_list_wrap, I'm trying to change the class on the h3 above it – pg. Jul 15 '11 at 00:12
and if I add this I change all of them: $("#listfeatures h3 a").addClass("check_list_selected"); – pg. Jul 15 '11 at 00:13
I don't know what `check_list_wrap` is, you'll need to include the HTML. I also updated the answer to fix a few typos. – Digital Plane Jul 15 '11 at 00:17
OK I think I am making progress, if I add this line: $("#listfeatures h3 #feature1").addClass("check_list_selected"); I get the right starting state, but when I click on it, the div hides but the h3 class isn't changed. with subsequent clicks it works right, except that the div and the class on the h3 are out of sync. – pg. Jul 15 '11 at 00:25
I think that you mean the class on the ` – Digital Plane Jul 15 '11 at 00:31

Using location.hash to activate jquery toggle/slideToggle

1 Answers1

Linked