Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
 
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site
Forum Search
Google Site Search
 All Forums
 Technical
 PHP (Unix / Linux / Apache) versions
 How to make Accordion content
Author « Topic »  

Fingertech
Advanced Member

Canada
318 Posts

Posted - 03/22/2022 :  15:20:34  
Is there a way to add an accordion to a content region? I figure the script is already there for the menu accordion, but can it be used for general content?

drivers
Ecommerce Template Expert

USA
890 Posts

Posted - 03/22/2022 :  18:58:19  
From what I have seen, if you have the css on the page code, and the script on the page code... then edit the content region as html it tends to work... just need to finesse it to fit your parameters... let me know if that helps (and works)

When it gets late at night, go to bed... try again tomorrow.

drivers
Ecommerce Template Expert

USA
890 Posts

Posted - 03/22/2022 :  19:20:45  
I added an accordian to a content region that I have located at riversideav you know what goes before the ----> com/about and then another period here php

If youd like to check it out I will leave it up temporarily

When it gets late at night, go to bed... try again tomorrow.

Fingertech
Advanced Member

Canada
318 Posts

Posted - 03/23/2022 :  10:24:45  
Can't get it to work. https://www.fingertechrobotics.com/jobs.php

The top accordion is written straight into jobs.php and works fine.

The bottom accordion is the exact same but called inside the content region. It gives an error "
Uncaught TypeError: Cannot read properties of null (reading 'style') at HTMLButtonElement.<anonymous> (jobs.php:164:15)
"
which refers to "
if (panel.style.maxHeight) {
"

Any ideas?

drivers
Ecommerce Template Expert

USA
890 Posts

Posted - 03/23/2022 :  11:37:08  
It appears to be working when I checked your page using chrome. <---

Looks good.

Did you fix it?

When it gets late at night, go to bed... try again tomorrow.

drivers
Ecommerce Template Expert

USA
890 Posts

Posted - 03/23/2022 :  11:39:55  
If not, then this is the code I used inside the content region. It needs to be placed into the content region using source code view.

<br />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style type="text/css">
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 20px;
transition: 0.5s;
}

.active, .accordion:hover {
background-color: #6f8cb0;
color: white;
}

.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
line-height:40px;
}

.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2212";
}</style>
<h2>
Accordion</h2>
<button class="accordion">list 1</button>
<div class="panel">
<p>
Your content goes here</p>
</div>
<button class="accordion">list 2</button>
<div class="panel">
<p>
Your content goes here</p>
</div>
<button class="accordion">list 3</button>
<div class="panel">
<p>
Your content goes here</p>
</div>
<script>
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.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>

When it gets late at night, go to bed... try again tomorrow.

drivers
Ecommerce Template Expert

USA
890 Posts

Posted - 03/23/2022 :  15:46:20  
Please let me know if that worked for you :)

When it gets late at night, go to bed... try again tomorrow.

Fingertech
Advanced Member

Canada
318 Posts

Posted - 04/12/2022 :  13:19:17  
Hi drivers, thanks for your example. We had just hard-coded it into the page rather than trying to figure out the content region. I see now some differences so next time we need one I'll try your method. Thanks!
  « Topic »  
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000