Accordion Bug

[mariusjopen]

Dear @monoparade
yes… Accordeons. It is always a pain to find a good one.

I would have another look.

Also I always need to try many when we set up an accordeon in a project.

Best!

Marius

[Brant]

@mariusjopen Could you recommend one, i've been searching for hours and nothing seems to work. thanks!

[Richard]

Dear @Brant

This is a Basic Accordion that i use sometimes when needed:

jQuery -

jQuery('.accordion-module').find('.accordion-title').click(function(){
        jQuery(this).next().slideToggle();
        jQuery(this).toggleClass("accordeon-active");
        jQuery(".accordion-module .accordion-content").not(jQuery(this).next()).slideUp();
    });

Basic HTML - to understand what the jQuery is referring to/ activating -

<section class="accordion-module">
    <div class="accordion-box">
    
        <div class="accordion-title">
            
        </div>

        <div class="accordion-content">

        </div>

    </div>
</section>

And the CSS -

.accordion-module{
 
    .accordion-box{
        
        .accordion-title{  
        }

        .accordion-content { 
            display:none;
        }
    }
}

Good Luck and thank you for using Lay Theme

Best
Richard

[Brant]

Thanks a lot Richard - I will give it a try!

Best
Norman

[Brant]

Hi @Richard-Keith, I had to try another way and used this very simple tutorial here: (https://www.w3schools.com/howto/howto_js_accordion.asp).

I got as far as that I can trigger the accordion animation, but it somehow wont slide down. Maybe you know what I've been missing?

thanks so much!

www.bodyandspace.de

[Richard]

Dear @Brant

I have used the example you provided:
https://www.w3schools.com/howto/howto_js_accordion.asp

& this works for me, Did you remember to wrap your Javascript in a "Newpage Event"?

https://laytheme.com/documentation.html#custom-javascript

Custom CSS:

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

Custom HTML:

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Custom JS - Note how the script in wrapped in a Newpage Event :)

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	if(type == "category" && obj.id == 1){
		
		var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
          acc[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight) {
              panel.style.maxHeight = null;
            } else {
              panel.style.maxHeight = panel.scrollHeight + "px";
            }
          });
        }
		
	}
});
</script>

Hope this helps you @Brant

Best Wishes
Richard

[Brant]

Hi @Richard-Keith,
i'ts kind of working now, thank you so much for helping me out!

if you could just have a final quick look: unfortunately it only works when i put the html code in the section 'Custom HTML at bottom'. But not when i want to place it on the grid via 'add HTML'. How come that makes a difference?

I Hope you can help me once more,
All the best
Norman

[Richard]

Dear @Brant

If you put the HTML part into "+more - HTML" it will be there but you need to remember to add some CSS to make it visible,
Put some in "+More - HTML" and then send me the link & i can verify that it is indeed there :)

Best
Richard

[Brant]

hi @Richard-Keith,
thanks for your quick response!

so what I did now is also added the css into the "+more-HTML'-part and put it into a <style></style>. the accordion was actually already visible before, but unlike the html I placed in the 'Custom HTML at bottom', it is not functional.

I now put two accordions on the site: www.bodyandspace.de (one I added through "+more-HTML" and one I added to the 'Custom HTML at bottom' (this one is working).

thanks

Edit: It seems to work now, I have no idea how, but it works! thanks again richard!

[Richard]

Dear @Brant

The Website looks Great! :)

Good to see that it worked out and as always thank you for using Lay Theme.

Best wishes
Richard

[egorkraft]

Hi @Brant I have exactly the same bug, accordion works ok when added at the 'Custom HTML at bottom' however the content isn't displayed if added through "+more-HTML".
Can you please kindly specify what exactly did you put in <style></style>.
Thanks.

[Richard]

Dear @egorkraft

Could you post a link to your website and the Accordion in question, then i can take a better look :)

Best
Richard

[egorkraft]

Hi @Richard-Keith. Thanks for a prompt reply.
You can find it here http://egorkraft.art/cas

Please don't mind the website being a mess atm :)

[Richard]

Dear @egorkraft

Apologies for the delay:
Im looking into it and we have a max-height of 0 ?

The accordion gets the class "active' so it is triggering,

Could you post your HTML along with whatever CSS you are using?

If this doesn't work maybe you could send me a private message with your Login details and I can then take a proper look.

Let me know :)

Best
Richard

[egorkraft]

Hi @Richard-Keith,

I'm using just exactly what you have provided above in response to Brant in this chat:

Custom CSS (In Custom CSS & HTML panel)

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #ffffff;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
  max-height: 100px;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

Custom <head> content

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	if(type == "project, page" && obj.id == 105, 81){
		
		var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
          acc[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight) {
              panel.style.maxHeight = null;
            } else {
              panel.style.maxHeight = panel.scrollHeight + "px";
            }
          });
        }
		
	}
});
</script>

Custom HTML at bottom

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

So as you can see custom HTML at bottom does work ok, however when I add just the same code to gridder via "+more - HTML" it gets the class "active' however max-height is not triggered. I tried adding various CSS properties of (max-height; overflow and display) to it but to no avail.

Thanks,

Best
Egor

[egorkraft]

@Richard-Keith Hi again. I’m kindly pinging you to get back to me. Thanks in advance

[Richard]

Dear @egorkraft

you must give your '.panel' in CSS a height. the class active is indeed being added to your accordion outer:

But it cannot show anything because it is 0px high.

so something along the lines of

.panel {

  height:50px;
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

Let me know how this goes! :)
forgive me for the delay.

Best wishes, have a wonderful day & thank you for using Lay Theme

Sincerely
Richard

[egorkraft]

@Richard-Keith Hi Richard, I tried what you suggested. but unfortunately it didn't do it.
I PM'ed my login details to you in case you could have a look some time soon ( :

[Richard]

Dear @egorkraft

Cool will take a look :)

Best
Richard

[FW]

Any solution there? I do have the same problems as egorkraft!
Many thanks in advance.