QA Accordion - Nyt projekt

Title

This could be a normal Question /Answer accordion. It can easily be styled with colors, backgrounds and transition times. It is easy to make the accordion fit to the style of an existing site.

The code is taken from here : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

If you follow the link, you can try setting colors and so.

This is a H2 text for the accordion

This accordion has at the right,a sign to tell which section is active

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.

I have only made the html-object half of the page.

It spans the width you give the object.

Clip the code under the accordeon.

If you paste the code into a html-object, it should function at once.

<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;

}

.accordion:after {

content: '\002B';

color: #777;

font-weight: bold;

float: right;

margin-left: 5px;

}

.active:after {

content: "\2212";

}

.panel {

padding: 0 18px;

background-color: white;

max-height: 0;

overflow: hidden;

transition: max-height 0.2s ease-out;

}

</style>

</head>

<body>

<h2>This is a H2 text for the accordion</h2>

<p>This accordion has at the right,a sign to tell which section is active</p>

<button class="accordion">Section 1</button>

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

<button class="accordion">Section 3</button>

</div>

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>

</body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

who_is_logged(); echo $user['realname']; ?>

Tilbage til indhold