Wrapper div around multiple elements on one page
Hi Armin and Marius,
I've implemented a js-accordion into a page but I'm having trouble creating a wrapper element around multiple elements/blocks of the page to trigger a whole group at once.
I've tried adding simple html blocks in gridder before (<div class="wrapper">) and after (</div>) the elements but it automatically closes the start div to (<div class="wrapper"></div>).
Is there any other way to do this?
Many thanks in advance!
Dear @l_s
please be aware of this:
http://laytheme.com/documentation.html#custom-javascript
Does that influence your JS code?
Best!
Marius
Hi @mariusjopen, thanks for your message. Yes, I read it and changed my script accordingly.
The accordion seems to be running but as I was trying to say I can't figure out how to apply it to multiple elements at once vs. only one gridder block, which I can easily assign a class to via the right click menu.
But nevertheless, I think this is more html related, isn't it? Any idea how to solve the wrapper situation?
Dear @l_s
you can assign it to each element with the same class.
You can give objects a class or id and with the Element Inspector you can also have a look at the structure of the website.
Hope I could help!
Marius
@mariusjopen Yes, I found that one but is there a way to group them as in putting a wrapper div around multiple elements so that all elements become a child? Otherwise th accordion won't collapse the elements as a whole but rather collapse them individually, if you know what I mean.
@mariusjopen Still stuck with this topic. Unfortunately not. I also tired several shortcodes plugin and can't get any of the accordions to work. Is there one that has been tested with laytheme?
Dear @l_s
can you once explain in simple steps what you want to achieve? And where the problem is?
Then it is easier for me to understand.
Best!
Marius
@mariusjopen Yes, as described I would like to have an accordion on a page. I have 3 categories out of which I just want one opened and two closed at a time.
I've tried working with Jquery slideToggle and Tree Traversal.
First, I managed to trigger all elements with a certain class I assigned. That method left out certain placeholder/grid elements in between. Plus, I have assign a class manually to a lot of elements. That's referring to my original question: WP simply closes any open tag I've inserted when adding html in gridder (e.g. <div> will be turned into <div></div>.
My current approach is using nextUntil because it doesn't seem to be possible to wrap multiple elements in one div in Laytheme, without touching the js core of the theme.
<script>
jQuery(document).on("click", "#accordion-toggle-1", function() { jQuery("#accordion-toggle-1").nextUntil("#accordion-toggle-2").slideToggle(); });
</script>
However, this approach only toggles one single elements, which is the first sibling in the div of the element #accordion-toggle-1. The code runs perfectly well in an isolated environment.
Does this help to understand my issue?
Dear @l_s
Did you have a look into this?
this
https://www.w3schools.com/jquery/jquery_selectors.asp
$(this)
So you adress all the elements with a specific class. And then when you click on this something will happen.
Hope that helped :-)
Best!
Marius
For anyone interested, since the help here is clearly limited:
As there seems to be no way to create a wrapper, I solved the problem with:
# Method
".row:nth-child(NUMBER)"
# Applied to my accordion this looks like:
jQuery(document).on("click touchstart", ".accordion-toggle-3", function() { jQuery(".row:nth-child(21)").nextUntil(".row:nth-child(25)").slideToggle();
Here .accordion-toggle-3 is the class of the element to be clicked to execute the toggle. This can also be bound to an event changing e.g. a + into a - for showing the current state (open/closed).
Good luck!