Docs

[drsefe]

Hi,

I am building a website with a lot of tutorials. Tutorials are going to be inside an accordion. After each lecture is completed, this should be marked, for each lecture separately. This is going to tell my subscribers, which tutorials are completed and which not.
Is it possible, that once a person clicks on a segment of an accordion and closes it, header changes color to green and stays green permanent even after refreshing? To get this functionality, every accordion header is probably going to have an individual id. I’m fine with that. If php, js or jquery is needed, im fine with that also.

Example(is not working):
.x-accordion-heading .x-accordion-toggle.collapsed:visited {
background-color: green !important;
}

Page: http://www.enastvar.com/es-motivacija/

Is it also possible, that after a lecture is completed, the cross, which is positioned in front of a title, and is rotating when accordion is opened, is replaced with an image(check mark)? Check mark should not rotate like the cross and should stay after refreshing.

Best Regards,

Tine

[Thai]

Hi Tine,

#1] Please add the following code under Customizer > Custom > Global Javascript:

jQuery(function($){
	$(".x-accordion-heading .x-accordion-toggle").on('click touchend', function(event) {
		event.preventDefault();
		if( $(this).hasClass('first-click') ){
			$(this).removeClass('first-click').addClass('sencond-click');
		} else {
			$(this).addClass('first-click');	
		}
	});
});

#2] After that add the following CSS under Customizer > Custom > Global CSS:

.x-accordion-heading .x-accordion-toggle.sencond-click {
    background-color: green !important;
    color: #fff;
}

Hope it helps 🙂

[drsefe]

Hi Thai,

I must say you are a Legend!!! 🙂 It works great. There is only one minor thing left. After the page is refreshed, everything is back to normal. Is it possible to code it so, that even after the page is refreshed, used accordions would stay green? I hope that I do not need some kind of cookies that would track this kind of data.

Thank you for your help 😉

Tine

[Nabeel A]

Hi Tine,

The above script is only before the page gets refreshed. The script will be reset once the page is refreshed. A permanent solution could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[Bell_Lodge]

Hi Tine,

Maybe Check out this javascript page for adding a cookie.. It might be a way forward for you..

http://www.codeproject.com/Articles/16288/JavaScript-Page-Cookie-maintaining-page-state

[Rue Nel]

Hey @Bell_Lodge,

Thanks for chiming in!
This could help other users looking for a solution.

Best Regards.

[Author]

Posts