Accordion Bug

monoparade · wrote on Jan 28, 2020, 9:34 AM

Hi,

I'm using an accordion on this site www.robin-beratung.de/beratung

The accordion is working, but sometimes it's jumping to the bottom of the page or after clicking it opens and closes a couple of times very fast but it's not able to read the hidden text. Anyone any ideas what the Problem is?

I checked it in Chrome and Firefox... In Safari on my iPhone it's working. Android: same Problem

this is my code Java in <head>

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	
	if(type == "page" && obj.id == 26){
	    
 // display the first div by default.
 jQuery("#accordion div").first().css('display', 'none');

 // Get all the links.
 var link = jQuery("#accordion a");

 // On clicking of the links do something.
      jQuery(document).on("click","#accordion a", function(e) {

     e.preventDefault();

     var id = jQuery(this).attr('href');
     this.classList.toggle("open");
     jQuery(id).slideToggle();

        });
    }
});

</script>

Custom CSS


#accordion {
  text-align: center;
  padding: 0em;
  display: block;
  text-decoration: none;
  line-height: 1em;
}



#accordion a:before {
  content: "+";
  float: left;
  display: block;
    }

#accordion .open:before  {
    content: "\2013";
    vertical-align: middle;
    float: left;

}
  


#accordion div {
    background:#fafafa;
    text-align:left;
    display:none;
    margin-left: 50px;
	margin: 0 auto;
    padding: 1em 0 1em 0;
    padding-left:1em;
    padding-right:1em;
    font-size: 1em;
    line-height: 1.5em;
    border-bottom: 1px solid #2c3e50;

}



.slug-beratung .acc a {
    display:block;
    background:#fff;
    color:#456;
    text-decoration:none;
    max-width: 100%;
    border-bottom: 1px solid #2c3e50;
    height: 10%;
    line-height: 1em;
    padding-bottom: 1em;
    }

    
.slug-beratung .acc a:hover {
 color: #e73f56;
  
}```

mariusjopen · wrote on Jan 29, 2020, 9:30 AM

Dear @monoparade
we do not have the time to really debug your code.

But what I recommend is this:

Try to find an accordeon script which which work in jsFiddle.
For example I do not see what this is about: jQuery(id).slideToggle();

JsFiddle is good to isolate code and test it in a clean envrionment. Then at least you know that your accordeon works.

Best!

Marius

monoparade · wrote on Jan 29, 2020, 10:51 AM

Dear Marius,
sure. I understand of course .thanks for your reponse.

The thing is that the code is working in JsFiddle.
Best
Chrissi

mariusjopen · Sep 8, 2020, 9:42 AM

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 · wrote on Sep 8, 2020, 9:42 AM

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

Richard · wrote on Sep 9, 2020, 9:05 AM

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 · wrote on Sep 9, 2020, 4:50 PM

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

Best
Norman

Brant · Sep 9, 2020, 5:49 PM

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 · wrote on Sep 10, 2020, 8:20 AM

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 · wrote on Sep 10, 2020, 1:38 PM

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 · Sep 10, 2020, 2:30 PM

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 · Sep 10, 2020, 1:50 PM

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 · Sep 16, 2020, 4:32 AM

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 · B Brant Sep 10, 2020, 2:30 PM

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 · Sep 28, 2020, 5:20 AM

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 · wrote on Sep 28, 2020, 9:57 AM

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 · Sep 29, 2020, 12:02 PM

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 · Sep 29, 2020, 8:03 AM

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 · wrote on Oct 1, 2020, 10:57 AM

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

Richard · Mar 24, 2021, 3:39 AM

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

Lay Theme Forum

Accordion Bug

Before you post:

When you post:

Online Users