Wrapper div around multiple elements on one page
-
Dear @l_s
please be aware of this:
http://laytheme.com/documentation.html#custom-javascriptDoes 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!
-
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it