blog documentation FAQ followers forum marketplace services youtube

solved jrElastic accordion

The Jamroom Network » Forum » Design and Skin Customization » Page » jrElastic accordion
blindmime
@blindmime
11 years ago
772 posts
Is there a collapsable accordion class in jrElastic?
updated by @blindmime: 08/15/14 05:51:54PM
SteveX
SteveX
@ultrajam
11 years ago
2,587 posts
Take a look at the left column modules menu in the ACP


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
blindmime
@blindmime
11 years ago
772 posts
The script which establishes this looks like it only shows up in the ACP. Would there be a way to have it show out on the site as well? I've tried hard coding in the meta.tpl file, which works OK on the site, but then in the ACP the script is duplicated and collapsing a section opens-closes-opens it.
SteveX
SteveX
@ultrajam
11 years ago
2,587 posts
As far as I know its just jquery, not a separate script.

This does it in the acp for a definition list with the class "accordion" (needs to be the same structure as the acp dl):
<script type="text/javascript">
$(document).ready(function(){
(function($) { var allPanels = $('.accordion > dd[id!="ccore"]').hide();
    $('.accordion > a > dt').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false; }); })(jQuery);
return true;
 });
</script>

You'd need to add that jquery either into the template, or via a module or skin. If you don't wnat to use the same structure, change the selectors and adjust the js to suit.

Can you post the structure of the menu you want to use?


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 07/06/14 02:37:34PM
blindmime
@blindmime
11 years ago
772 posts
I just want an accordion on pages outside the ACP. For instance, on my home page, I want an About Us paragraph that is hidden until clicked. I'm trying this:

<dl class="accordion">
<a href=""><dt class="page_section_header admin_section_header"> <div class="title"><h2>WHAT IS THIS?</h2></div></dt></a>
<dd id="cabout">
<div class="item-row">
<p>paragraph </p>
</dd>
</dl>

This works OK, but evidently I'm missing something because, after I've collapsed it, I click again to slide it back up but it slides up and back open again (it doesn't stay closed).
SteveX
SteveX
@ultrajam
11 years ago
2,587 posts
Yes, that's what the accordion does - one set is always open.

You could try something like this from the comments in this article:
http://css-tricks.com/snippets/jquery/simple-jquery-accordion/

$(document).ready(function($) {
	$('.accordion dd').hide();
	$('.accordion dt a').click(function(){
		if ($(this).hasClass('selected')) {
			$(this).removeClass('selected');
			$(this).parent().next().slideUp();
		} else {
			$('.accordion dt a').removeClass('selected');
			$(this).addClass('selected');
			$('.accordion dd').slideUp();
			$(this).parent().next().slideDown();
		}
		return false;
	});
});
If it's conflicting with the admin accordion change the class and modify the css to suit.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
blindmime
@blindmime
11 years ago
772 posts
Thanks so much! I had to take out the "a" in ('.accordion dt a') and then it worked perfectly.

Tags