How to add and remove value from url using toggle?

Question

I have the following code, when the user click on toggle to show content, I want to add a hash and id to the url (http://www.somedomain.com/test.html#2111) . When closed I want to remove the #2111.

How do i do that using the toggle?

CSS

.toggle{
    display:inline-block;
    height:48px;
    width:48px;
    background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");
}
.toggle:after{
    content:"View All";
    display:block;
    height:48px;
    line-height:48px;
    width:288px;
    margin-left:48px;
}
.toggle.expanded:after{
     content:"Close All";
}
.toggle.expanded {
    background:url("http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png");
}

JQUERY

$(document).ready(function () {
            var $content = $("div.moreinfo").hide();

            $(".toggle").on("click", function (e) {
                $(this).toggleClass("expanded");
                if($(this).hasClass('expanded')) {
                    $("div.plus").hide().removeClass("closed");
                    $("div.minus").show().addClass("opened");   

                } else {

                    $("div.plus").show().addClass("closed");    
                    $("div.minus").hide().removeClass("opened");


                }
                $content.slideToggle();

            });
        });

Rob M. · Accepted Answer · 2015-05-12 19:13:05Z

3

You can just set location.hash equal to an empty string:

location.hash = '';

or set it to a value:

$(document).ready(function () {
    var $content = $("div.moreinfo").hide();
    $(".toggle").on("click", function (e) {
        $(this).toggleClass("expanded");
        if($(this).hasClass('expanded')) {
           location.hash = someValue;
        } else {
           location.hash = '';
        }
        $content.slideToggle();

    });
});

answered May 12, 2015 at 19:13

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user244394 Over a year ago

thanks I had updated with ur code , but only problem is that it doesnt remove the #. after adding #somevalue. because of the hash isnt removed from url.. it jumps around the page..Is there a way to remove the hash so when i click on togle close open it own jump up..

Rob M. Over a year ago

No problem! There is no way to remove the the hash from the url without reloading the page. Perhaps you could give the element you want the user to be scrolled to an id and instead of setting to '' you could set it to that id targetElement

Collectives™ on Stack Overflow

How to add and remove value from url using toggle?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related