asked on

Adding a post to current js code

We have a site that has some js that opens/closes panels in a bootstrap theme. We want to be able to add to the script to post if the panel is opened or closed so that if the user comes back, it will be open or closed like it was when they were there last.

This is the code that is called in an external .js file.

jQuery(document).on('click', '.panel .tools .fa-chevron-down', function () {
        var el = jQuery(this).parents(".panel").children(".panel-body");
        if (jQuery(this).hasClass("fa-chevron-down")) {
            jQuery(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
            el.slideUp(200);
        } else {
            jQuery(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
            el.slideDown(200);
        }
    });

Open in new window

This is the html that is calling it

<div class="col-lg-6 column draggable" id="panel_id_1" data-column="#panel_id_1_col#" data-row="#panel_id_1_row#">

                      <section class="panel">
                          <header class="panel-heading panel-homes">
                              MY NOTIFICATIONS SINCE LAST LOGON					

                              <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down chevwhite"></a>
                            </span>
                          </header>
</section>
</div>

Open in new window

I know I need to add an update to it (I think!) and pass the id variable - id: $(this).attr("id") and some sort of post but I have no idea where to put it, etc to call my script (that I have already written. Can i get some guidance on where to add this new information to the current script?

ste5an

[..]to add to the script to post if the panel is opened or closed [..]

Why not storing this Information locally?

lenamtl

You can use localstorage to store the value of the panel
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Here is my code you can adapt to your needs

(function () {
	if (Boolean(localStorage.getItem('sidebar-toggle-collapsed'))) {
	var body = document.getElementsByTagName('body')[0];
	body.className = body.className + ' sidebar-collapse';
					}
})();
					
// Save value in localstorage when user click on the  sidebar
$('.sidebar-toggle').click(function(event) {
	event.preventDefault();
		if (Boolean(localStorage.getItem('sidebar-toggle-collapsed'))) {
			localStorage.setItem('sidebar-toggle-collapsed', '');
		} else {
			localStorage.setItem('sidebar-toggle-collapsed', '1');
	}
});

Open in new window

digitalwise

ASKER

We want this to be saved in their profile so when they come back a week later, they have the same open/close settings available to them so your solution won't work.

lenamtl

Usually this is enough to save a panel state in localstorage and set to never expire.
This will be ok until the user clear the browser cache, so longer than a session but can be deleted.

So to have the value at any time you can save the toggle value to Database this will require some Ajax.

This is require a lot more coding as you will need to set default value, check if there is a value in Database and load the value from DB
on each page load if no then apply default state and when user is changing toggle state save it in DB.

So you need to create a table toggle_state and save the data: user_id | toggle state value | a section ID | and a timestamp

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial