Wrapper div around multiple elements on one page

[mariusjopen]

Dear @l_s
please be aware of this:
http://laytheme.com/documentation.html#custom-javascript

Does that influence your JS code?

Best!

Marius

[l_s]

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?

[mariusjopen]

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

[l_s]

@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]

Dear @l_s

does this help?
https://api.jquery.com/multiple-selector/

Best!

Marius

[l_s]

@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?

[mariusjopen]

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

[l_s]

@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?

[mariusjopen]

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

[l_s]

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!

[mariusjopen]

Dear @l_s
ah wow!
Thank you for sharing and using LayTheme!

:-)

Marius