Sport Ngin User Group Forum
SportsEngine Community Forum
Sign up Latest Topics
 
 
 


Reply
  Author   Comment  
shirch

Junior Member
Registered:
Posts: 7
 #1 
Good afternoon, 

I have been trying to figure out how to create an accordion CSS, and how it works. Hoping someone might be able to help out, or point me in the right direction. 

Thank you!
0
nickburggraf

Moderator
Registered:
Posts: 27
 #2 
Put this into a CODE ELEMENT:  Is that what you mean?


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
.active, .accordion:hover {
    background-color: #ccc; 
}
.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}
</style>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</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>
</body>
</html>

__________________
Burggie
0
shirch

Junior Member
Registered:
Posts: 7
 #3 
Is there a way to add it to a layout container or page element without using the Code element so we can easily edit the information inside.
0
nickburggraf

Moderator
Registered:
Posts: 27
 #4 
Does the TAB ELEMENT not fit your needs on displaying content with a header?

Just want to make sure we're not trying to reinvent the wheel.

__________________
Burggie
0
Previous Topic | Next Topic
Print
Reply

Quick Navigation:

Easily create a Forum Website with Website Toolbox.

Powered by Website Toolbox - Create a Website Forum Hosting, Guestbook Hosting, or Website Chat Room for your website.