Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Wrapper div around multiple elements on one page

    General Discussion
    2
    12
    613
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      l_s last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

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

        Does that influence your JS code?

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • L
          l_s last edited by 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?

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            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

            www.mariusjopen.world

            L 1 Reply Last reply Reply Quote 0
            • L
              l_s @mariusjopen last edited by

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

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Dear @l_s

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

                Best!

                Marius

                www.mariusjopen.world

                L 1 Reply Last reply Reply Quote 0
                • L
                  l_s @mariusjopen last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    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

                    www.mariusjopen.world

                    L 1 Reply Last reply Reply Quote 0
                    • L
                      l_s @mariusjopen last edited by 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?

                      1 Reply Last reply Reply Quote 0
                      • mariusjopen
                        mariusjopen Global Moderator last edited by

                        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

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 0
                        • L
                          l_s last edited by

                          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!

                          1 Reply Last reply Reply Quote 1
                          • mariusjopen
                            mariusjopen Global Moderator last edited by

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

                            :-)

                            Marius

                            www.mariusjopen.world

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post

                            Before you post

                            Use the Search Feature. Maybe there is already a solution to your issue.

                            1. Update Lay Theme and all Lay Theme Addons
                            2. Disable all Plugins
                            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                            4. Now see if your problem solved itself
                            5. Go here, see if your problem is listed here:
                            Troubleshooting

                            When you post:
                            1. Post a link to where the problem is
                            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                            Thanks!

                            Online Users

                            Recent Topics

                            • N

                              website blank.

                            • S

                              Theme crashed - because of Polylang?

                            • S

                              New fade-in / opacity bug?

                            • A

                              Unable to update lay theme / to login wp admin

                            laytheme.com