We Keep Coding

How do I recreate this toggle in CSS?

I'm trying to recreate this toggle in CSS/HTML and JavaScript. When closed the toggle shows the title: 'Stap 2 Implementatie in de organisatie' and an icon (circle with a plus in it).
When open, it shows some text, and beneath it a section with downloadable tools, they could be implemented as images next to each other, but it's probably more versatile if it's the icon and text separated.
I've managed to create the title, the text underneath it, I just need help with:
Different icon for closed and open toggle
Extra green section in toggle
How to have 20px border radius on button, but only keep the top left and right border radius when clicked/open. (see extra screenshot)
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";
}
});
}
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight:600;
font-family:'Dosis';
border-top-left-radius:20px;
border-top-right-radius:20px;
}
.icon {
float:right;
}
.header {
color:#45b072;
}
.active, .accordion:hover {
background-color: #7d206a;
}
p {
color:#fff;
font-family:'Dosis';
}
.panel {
padding: 0 18px;
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
<h2>Accordion</h2>
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon">icon</span></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>

You can try it like this, I have explained the changes in comments.
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";
}
});
}
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-radius: 20px; /* You can have border-radius on all sides */
}
.accordion.active {
border-bottom-left-radius: 0px; /* You can set the border-radius of bottom part to 0 */
border-bottom-right-radius: 0px;
}
.icon {
float: right;
height: 30px; /* Define height and width for the icon */
width: 30px;
background-image: url("https://i.stack.imgur.com/Vvuj2.png"); /* Image for the closed panel */
}
.active .icon {
/* Icon for the active panel */
background-image: url("https://i.stack.imgur.com/ZAR5V.png");
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
padding: 0 18px;
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.green-content { /* Properties for the new content */
display: grid;
grid-template-columns: repeat(4, 1fr); /* Four columns for your content as per image */
background: #45b072;
margin: 0 -18px; /* Negative margin so that the parent padding doesn't affect it */
margin-top: 10px;
padding: 18px; /* Same padding as parent */
color: white;
}
<h2>Accordion</h2>
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon"></span></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 class="green-content">
<!-- Extra content added -->
<div class="column-1">
Content
</div>
<div class="column-2">
Content
</div>
<div class="column-3">
Content
</div>
<div class="column-4">
Content
</div>
</div>
</div>

There are probably a lot of takes for this opinion but I think you should ditch the panel.style.dipslay and use class approach instead. So the gist of it is that you add an open state class to the wrapper and based on that you do stuff. I have set it up a bit for you so you can use the class accordion-container--is-open to do stuff with your css when the accordion is open
var accordions = document.querySelectorAll(".accordion-container");
accordions.forEach(element => {
const toggler = element.querySelector('.accordion')
toggler.addEventListener('click', function() {
element.classList.toggle('accordion-container--is-open')
})
})
.accordion {
display: flex;
align-items: center;
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.icon {
margin-left: auto;
}
.accordion-container--is-open .icon {
color: aqua;
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.panel > * {
padding: 0 18px;
}
.accordion-container--is-open .panel {
display: block;
}
.accordion__footer {
display: flex;
align-items: center;
height: 4rem;
background-color: lime;
}
.accordion__footer-icon {
width: 2rem;
height: 2rem;
background-color: aqua;
}
<h2>Accordion</h2>
<div class="accordion-container">
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon">icon</span></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 class="accordion__footer">
<span class="accordion__footer-icon">1</span>
<span class="accordion__footer-icon">2</span>
<span class="accordion__footer-icon">3</span>
</div>
</div>
</div>

Have a play with this
I use delegation and content. You can change content for background image
const container = document.getElementById("container");
container.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("icon")) {
const button = tgt.closest("button");
tgt.classList.toggle("open");
const close = !tgt.classList.contains("open");
tgt.classList.toggle("close",close);
const panel = button.nextElementSibling;
panel.classList.toggle("hide",!close)
}
})
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.icon {
float: right;
display: inline-block;
width: 50px;
}
.icon.open::after {
content: "⭕"
}
.icon.close::after {
content: "❌"
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
padding: 0 18px;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.hide { display: none;}
<h2>Accordion</h2>
<div id="container">
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon open"></span></button>
<div class="panel hide">
<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>
</div>

javascript/jquery: scroll function does not work after running click function

I built a scroll function to hide the navigation (.li) and show the burger-menu (#menu).
Farther I built a click function on the burger-menu to open the fullSizeMenu.
After the second click event to hide the fullSizeMenu, the scroll function no longer works as built. By scrolling back to top, the navigation is not displayed although it should at a wide over 1100px.
How can I implement this without having to install a reload?
$(document).ready(function() {
var open = false;
$(window).scroll(function() {
if (document.documentElement.scrollTop > 50 ) {
$('.li').addClass('remove-li');
$('#menu').show();
}
else {
$('.li').removeClass('remove-li');
$('#menu').hide();
}
})
$('#menu').click(function() {
if(open = !open){
$('.fa-bars').addClass('fa-times');
$( ".li" ).wrapAll( "<div class='fullSizeMenu' />");
$('.fullSizeMenu').show();
$(".li").removeClass('remove-li');
$('.li').addClass('change-li');
$('a').addClass('change-a');
$(window).off('scroll')
}
else {
$('.fa-bars').removeClass('fa-times');
$( ".li" ).unwrap();
$('.fullSizeMenu').hide();
$(".li").addClass('remove-li');
$('.li').removeClass('change-li');
$('a').removeClass('change-a');
// window.location.reload(true);
}
})
})
body {
background: rgb(238, 238, 238);
font-family: 'Open Sans', 'Arvo', sans-serif;
font-size: 20px;
margin: 0;
padding: 0;
top: 0;
left: 0;
height: 100vh;
}
/* Header with Navigation */
header {
height: 80px;
margin: 0;
padding: 0;
background: white;
top: 0;
left: 0;
width: 100%;
z-index: 100;
position: fixed;
}
.nav-container {
width: 60%;
left: 20%;
position: relative;
}
#menu {
display: none;
background-image:linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
cursor: pointer;
}
ul {
float: right;
}
ul li {
padding: 10px;
list-style: none;
float: left;
}
.remove-li {
display: none;
}
.change-li {
width: 100%;
float: left;
color: white;
font-size: 30px;
display: initial !important;
margin-top: 20px;
}
ul li a {
font-family: 'Open Sans';
font-size: 12px;
color:darkgrey;
text-decoration: none;
}
.change-a {
font-size: 26px;
color: white;
}
.logo {
width: 150px;
height: 20px;
margin-top: 30px;
}
button {
width: 70px;
height: 25px;
border: none;
outline: none;
float: right;
border-radius: 6px;
background: linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%)
}
.button-text {
font-size: 12px;
color: white
}
/* FullSizeMenu */
.fullSizeMenu {
background: linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%);
font-family: 'Open Sans', 'Arvo', sans-serif;
font-size: 40px;
text-align: center;
padding: 50px 0;
top: 80px;
left: -50%;
height: 100vh;
width: 200%;
position: absolute;
display: block;
overflow: auto;
}
/* Header with Navigation Mobile */
#media (max-width: 1100px) {
.header {
margin: 0;
padding: 0;
background: white;
top: 0;
left: 0;
width: 100%;
z-index: 100;
position: fixed;
}
.nav-container {
position: relative;
text-align: center;
top: 10%;
left: 10%;
width: 80%;
background: linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%)
}
.logo {
float: left;
}
.button {
display: none;
}
#menu {
display: block !important;
float: right;
}
ul .li {
display: none;
}
.remove-li {
display: none;
}
.change-li {
color: white;
font-size: 30px;
display: block !important;
width: 100%;
float:left;
}
.li .a{
color: white;
margin-right: 50%;
}
.fullSizeMenu {
margin-top: -10px;
}
}
/* Main Content with Paginated Image Slide */
main {
margin: 0;
padding: 0;
}
.slider-container {
width: 60%;
margin-top: 15%;
left: 20%;
background: white;
overflow: hidden;
height: 300px;
position: relative;
user-select: none;
}
input {
display: none;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.image-container {
width: 50%;
height: 100%;
float: left;
}
img {
width: 100%;
height: 100%;
}
.article-container {
width: 50%;
height: 100%;
float: left;
padding: 20px;
overflow: auto;
box-sizing: border-box;
}
h1 {
font-family: 'Arvo';
color: rgb(35, 182, 182);
}
p {
font-size: 14px;
color: darkgrey;
}
#pagination {
width: 100%;
bottom: 5%;
position: absolute;
text-align: center;
z-index: 99;
cursor: default;
}
#pagination .dots {
float: right;
width: 8px;
height: 8px;
margin-right: 20px;
position: relative;
border-radius: 100%;
display: inline-block;
background: white;
border: 2px solid rgb(54, 54, 54);
transition: .4s;
cursor: pointer;
}
#pagination .dots:hover {
background: rgb(54, 54, 54);
}
#i1:checked ~ #slide1,
#i2:checked ~ #slide2,
#i3:checked ~ #slide3{
z-index: 9;
animation: scroll 1s ease-in-out;
}
#i1:checked ~ #slide1 #dot1 {background: rgb(54, 54, 54);}
#i2:checked ~ #slide2 #dot2 {background: rgb(54, 54, 54);}
#i3:checked ~ #slide3 #dot3 {background: rgb(54, 54, 54);}
#keyframes scroll {
0% { opacity: .4;}
100% { opacity: 1;}
}
/* Main Content with Paginated Image Slide Mobile*/
#media screen and (max-width: 768px) {
.slider-container {
margin-top: 30%;
left: 10%;
width: 80%;
height: 500px;
}
.image-container {
width: auto;
height: 200px;
}
.article-container {
width: auto;
height: auto;
padding: 20px;
text-align: center;
overflow: auto;
}
#pagination .dots {
float: none;
}
}
/* Footer */
footer {
margin: 0;
padding: 0;
padding: 5%;
color: rgb(54, 54, 54);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="./main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="./app.js" type="text/javascript"></script>
<title>XXX</title>
</head>
<body>
<header>
<nav class="nav-container">
<a href="#!">
<img class="logo"src="./assets/images/logo.png">
</a>
<ul>
<li class="li">
Startseite
</li>
<li class="li">
Autos
</li>
<li class="li">
Standorte
</li>
<li class="li">
Hilfe
</li>
<li class="li">
Kontakt
</li>
<li class="li">
<button>
<a class="button-text" href="#!">Login</a>
</button>
</li>
<li>
<i class="fas fa-bars" id="menu"></i>
</li>
</ul>
</nav>
</header>
<main>
<div class="slider-container">
<input type="radio" id="i1" name="images" checked/>
<input type="radio" id="i2" name="images" />
<input type="radio" id="i3" name="images" />
<div class="slide" id="slide1">
<section class="image-container">
<img src="./assets/images/affen.jpg">
</section>
<section class="article-container">
<article>
<h1>Porsche</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>
</section>
</div>
<div class="slide" id="slide2">
<section class="image-container">
<img src="./assets/images/giraffen.jpg">
</section>
<section class="article-container">
<article>
<h1>Audi</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>
</section>
</div>
<div class="slide" id="slide3">
<section class="image-container">
<img src="./assets/images/loewen.jpg">
</section>
<section class="article-container">
<article>
<h1>VW</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>
</section>
</div>
<div id="pagination">
<label for="i1" class="dots" id="dot1"></label>
<label for="i2" class="dots" id="dot2"></label>
<label for="i3" class="dots" id="dot3"></label>
</div>
</div>
</main>
<footer>
<p> Copyright by xxx</p>
</footer>
</body>
</html>

So your implementation has quite some bad practices to begin with. A quick fix for your problem would be to add the $('body').css('overflow', 'hidden'); when the #menu is open and remove this css when menu is closed.
This way you can remove completely the $(window).off("scroll"); which is causing the scrolling event to stop, that's why you don't have the expected behaviour.
But I would refactor it completely since you are wrapping li element with a div inside ul which is not the way it should go, also naming classes such as <li class='li'></li> doesn't make sense.
If I can find more time I can provide you with an easy way to refactor this but for now I think the CSS trick will do to fix your issue.
I've created this pen so you can see it working: https://codepen.io/anon/pen/ejQxrV

jQuery SlideDown / SlideUp | "FAQ" | Opened

My title doesn't mean anything i guess, but it's complicated to name my problem.
So, i did a section in my html "faq" and when someone click on a question, the answer appaer with a slideDown. If we click on another question, that close the previous one (slideUp) and open this one you just clicked on. And when we click on a question, the color change with a .addClass / removeClass on the element.
The problem that i'm struggling with is the next one : When we load the page, i would like to have an element already opened and just one. When we click on another one, that will close the previous, and so on.
Some code, will speak a little bit better, there's a CodePen link. I would like to have the second element already opened :)
Thank you !

First, you call the slideDown() function on the element with open class on DOM ready. Then, you call slideUp method on the element with open class and remove the open class on click. This should do the trick:
$(function() {
var $_openedFaq = null;
//calling the slideDown to show the second element in the tabs
$('a.open').next('p').slideDown();
function openFaq($__p) {
$__p.slideDown();
}
function closeFaq($__p) {
$__p.slideUp();
}
$('.faq ul li').each(function() {
var $faq = $(this);
var $p = $(this).find('p');
var offset = $(this).offset().top;
$(this).find('a').click(function(e) {
e.preventDefault();
//on click hide the current active elements and remove the class from current active element
$('a.open').next('p').slideUp();
$('a.open').removeClass('open');
$('html, body').animate({
scrollTop: offset
}, 500);
// Test of code that i'm struggling with
if ($('.faq ul li').find('a').hasClass("open")) {
$p = $(this).next('p');
openFaq($p);
}
// End of the test
if ($_openedFaq != null) {
closeFaq($_openedFaq.find('p'));
$_openedFaq.find('a').removeClass("open");
}
if (($_openedFaq == null) || (($_openedFaq != null) && !$faq.is($_openedFaq))) {
openFaq($p);
$_openedFaq = $faq;
$p.prev('a').addClass("open");
} else {
$_openedFaq = null;
}
});
});
});
#font-face {
font-family: 'Conv_Besom';
src: url('../font/Besom.eot');
src: local('☺'), url('../font/Besom.woff') format('woff'), url('../font/Besom.ttf') format('truetype'), url('../font/Besom.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Roboto', sans-serif;
letter-spacing: 1px;
font-size: 14px;
font-weight: 500;
}
section {
background-color: #f9b40a;
}
.faq {
background-color: #f5f5f5;
padding-top: 65px;
padding-bottom: 65px;
}
.faq div.container div.row div.col-sm-6 h1 {
font-family: 'Source Serif Pro', serif;
text-align: center;
font-size: 60px;
margin: 0;
padding-bottom: 40px;
}
.faq div.container div.row div.col-sm-6 ul {
list-style-type: none;
padding: 0;
}
.faq div.container div.row div.col-sm-6 ul li {
font-weight: bold;
font-size: 14px;
padding: 10px 10px;
padding-top: 20px;
border-bottom: 1px solid #bfbfbf;
position: relative;
}
.faq div.container div.row div.col-sm-6 ul li:last-child {
border-bottom: none;
}
.faq div.container div.row div.col-sm-6 ul li a {
text-decoration: none;
color: #4a4a4a;
padding-right: auto;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.faq div.container div.row div.col-sm-6 ul li a:hover {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a:hover::after {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a::after {
content: "\f067";
font-family: 'FontAwesome';
color: #f9b40a;
position: absolute;
top: 20px;
right: 0;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.faq div.container div.row div.col-sm-6 ul li a.open {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a.open::after {
content: "\f068";
font-family: 'FontAwesome';
;
color: black;
position: absolute;
top: 20px;
right: 0;
}
.faq div.container div.row div.col-sm-6 ul li p {
font-weight: normal;
display: none;
}
.faq div.container div.row div.col-sm-6 img {
display: block;
width: 100%;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../includes/css/font-awesome.css">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="faq">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>FAQs</h1>
<ul>
<li>
Question 1
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</li>
<li>
<a class="open" href="#">Question 2</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</li>
<li>
Question 3
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</li>
<li>
Question 4
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</li>
</ul>
</div>
<div class="col-sm-6">
<img src="https://media.forgecdn.net/avatars/107/154/636364134932167010.jpeg" alt="Are you ready ?">
</div>
</div>
</div>
</section>

You could just add $('.faq ul li a:first').click(); once your page is loaded. That will register the first FAQ as open. I would have it be the last statement of your $(function(){ ... } call

Making a theme selector to my chatroom with php js and html [duplicate]

I'm pretty new to CSS and JavaScript and I was wondering if you could make a script that allows you to change what stylesheet the site uses.
Say: you had a green theme where everything is shades of green. What would you do so the user can change it to red with the press of a button?
Has anyone any idea how to do this?

You can set an Id to the link tag and switch the css at runtime.
HTML
<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />
JS
document.getElementById('buttonID').onclick = function () {
document.getElementById('theme_css').href = '../red.css';
};
Quick Demo:
$( "#datepicker" ).datepicker();
$('button').button().on('click', function () {
let linkHref = 'https://code.jquery.com/ui/1.11.4/themes/{THEME}/jquery-ui.css';
if ($('#swapTheme').prop('href').indexOf('pepper-grinder') >= 0) {
$('#swapTheme').prop('href', linkHref.replace('{THEME}', 'black-tie'));
} else {
$('#swapTheme').prop('href', linkHref.replace('{THEME}', 'pepper-grinder'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" id="swapTheme" rel="stylesheet">
<div id="datepicker"></div>
<button style="padding: 5px 15px;"> Switch Theme </button>

You could use CSS Variables (also known as Custom Properties) for such changes, given that they are supported by all modern browsers.
So, let's say you have a green/white theme, where green being the primary color, and white complementing it. The site might look like the following:
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid green;
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: green;
height: 50px;
color: white;
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: green;
background-color: white;
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: green;
color: white;
}
.footer-note {
color: green;
background-color: white;
padding: 3px 0;
display: block;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
So the first step to move to CSS Variables would be to refactor out the theme colors into variables --primary-color and --secondary-color. Here's how your stylesheet looks after the change.
You could begin by setting the default theme colors into the :root element style declaration:
:root {
--primary-color: green;
--secondary-color: white;
}
Then, you can replace all instances of hardcoded "green" in the stylesheet with a call to the primary color variable: var(--primary-color). So the styles for your logo might look like the following:
.header-logo {
...
background-color: var(--primary-color);
color: var(--secondary-color);
...
}
:root {
--primary-color: green;
--secondary-color: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
Now, if you intend to change the color from "green" to "red", all you need to do is change the value of --primary-color to "red". And, you can do that using Javascript!
With plain JS, you can set the color to red using:
document.body.style.setProperty("--primary-color", "red");
Or, with jQuery you could do:
$(document.body).css("--primary-color", "red");
$(document.body).css("--primary-color", "red");
:root {
--primary-color: green;
--secondary-color: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
I went one step further and created some buttons to show how you could allow the user to choose a set of theme colors - and change the values CSS Variables using jQuery.
Here's how the snippet below looks on Chrome 64 - in case you are still using a browser that doesn't support CSS Variables:
$(".header--theme-button").on("click", function() {
var primaryColor = $(this).css("--theme-primary");
var secondaryColor = $(this).css("--theme-secondary");
$(".header--theme-button").removeClass("active");
$(this).addClass("active");
$(document.body).css("--primary-color", primaryColor);
$(document.body).css("--secondary-color", secondaryColor);
});
:root {
--primary-color: orange;
--secondary-color: white;
--theme-primary: black;
--theme-secondary: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.header-settings {
float: right;
height: 50px;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
.header--theme-button {
height: 30px;
width: 30px;
margin: 10px 5px 0 0;
display: inline-block;
border-top: 15px solid var(--theme-primary);
border-bottom: 15px solid var(--theme-secondary);
border-right: 0;
border-left: 0;
padding: 0;
box-shadow: 0 0 3px gray;
}
.header--theme-button:hover {
box-shadow: 2px 2px 2px gray;
}
.header--theme-button.active {
box-shadow: 3px 3px 3px gray;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
<div class="header-settings">
<button type="button" class="header--theme-button active" style="--theme-primary:orange; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#2196F3; --theme-secondary:#eee;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:purple; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#F44336; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:green; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#FFEB3B; --theme-secondary:#222;">
</button>
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Yes, you can change CSS with Javascript. See this tutorial for more info. It basically links multiple stylesheets like this:
<link rel="stylesheet" type="text/css" title="blue"
href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
href="http://example.com/css/pink.css">
And then uses Javascript to change it:
<form>
<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
<input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</form>
The switch_style() function is written in that tutorial.

You don't even need any Javascript:
input[type=radio][value=light]:checked ~ article {
color: #222;
background-color: #FFEEAA;
}
input[type=radio][value=dark]:checked ~ article {
color: #EEE;
background-color: grey;
}
<body>
<input type="radio" name="theme" value="light" checked="checked">Light<br>
<input type="radio" name="theme" value="dark">Dark<br>
<article>
<h1>My super page!</h1>
<p>
Quibusdam sit repudiandae consequuntur doloremque illum ut ex quo. Esse temporibus est id suscipit repellat. Distinctio voluptatem voluptates asperiores dolorem dolorem placeat corporis quae. Quaerat voluptatem magni dignissimos rerum distinctio odio id.
</p>
</article>
</body>

Or just put your theme css in a css file and pass it to the function, On page load the if (localStorage.getItem("theme") != "") checks if theme has been set.. Here you have an example:
if (localStorage.getItem("theme") != "") {
loadcssfile(localStorage.getItem("theme"));
}
function loadcssfile(filename) {
if (filename != "") {
localStorage.setItem("theme", filename);
}
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
<div onclick="loadcssfile('css/pink.css')" id="pink">
Pink
</div>
<div
onclick="loadcssfile('css/blue.css')" id="blue">
Blue
</div>

Expand a Div Using jQuery

I'd like to expand .neo_accord_content_upon clicking a button referred to as .neo_expand_button. I've found several solutions but none seem to work in my case
Here is my HTML:
<body>
<div id="neo_wrapper"> <!-- Wrapper start -->
<div id="neo_container"> <!-- Container start -->
<div id="neo_header"> <!-- Header start -->
<div class="neo_logo">
<img src="http://fpoimagery.com/?t=px&w=200&h=100&bg=0ff&fg=000000" />
</div>
<div id="neo_main_nav"> <!-- Main navigation -->
<ul>
<li>About Us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Brokerage</li>
<li>Tenant Portal</li>
</ul>
</div> <!-- Main navigation end -->
</div> <!-- Header end -->
<div id="neo_home_image">
</div>
<div id="neo_about_section">
<div class="text_container">
<h1>About the Grossman Companies</h1>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="about_button">
<p>Read More</p>
</div>
</div> <!-- About section end -->
<div id="neo_accord_section"> <!-- Accord section start -->
<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Acquisitions</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
<div class="text_container">
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!--<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Private Lending</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
</div>
</div>-->
<!--<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Private Lending</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
</div>
</div>
<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Private Lending</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
</div>
</div>-->
</div> <!-- Accord section end -->
</div> <!-- Container end -->
</div> <!-- Wrapper end -->
</body>
My SASS:
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#neo_wrapper { /* Wrapper for entire page */
width: 100%;
height: 1800px;
margin: 0 auto;
background-color:#333;
#neo_container { /* Main content container */
width: 100%;
height: 100%;
margin: 0 auto;
background:#999999;
#neo_header { /* Header for logo, navigation */
width: 100%;
height: 100px;
background-color:#666666;
.neo_logo { /* Grossman logo */
float: left;
width: 200px;
height: 100px;
}
#neo_main_nav { /* Main navigation */
float: left;
margin: 55px 0 0 500px;
ul {list-style: none; padding-left: none; color: #FFF; font-size: 18px;}
li {
float: left; margin: 10px;
a {
/* Formatting for list items */
&:link {text-decoration: none; color: #FFFFFF;}
&:hover {color: #CCC; background-color: #333;}
&:active {color: #222; background-color: #222;}
&:visited {text-decoration:none; color: #FFF; background-color: #222;}
}
}
} /* Nav end */
} /* Header end */
.text_container { /* Container for centered text */
width: 500px;
text-align: center;
color:#000;
margin: 0 auto;
}
#neo_home_image { /* Fullbleed image */
width: 100%;
height: 400px;
}
#neo_about_section { /* About section */
width: 100%;
height: 200px;
background: #FFF;
.about_button {
width: 150px;
height: 35px;
background-color:#222;
color: #FFF;
text-align: center;
line-height: 35px;
margin: 0 auto;
margin-top: 15px;
cursor: pointer;
display: table;
}
} /* About section end */
#neo_accord_section {
width: 100%;
height: 700px;
.neo_accord { /* Drop down sections */
width: 100%;
height: 100px;
background: #222;
border: solid #FFF 1px;
.neo_accord_header { /* Header area in accordion section */
width: 100%;
height: 100px;
background: #222;
h1.neo_accord_headertext {
margin: 0 auto;
text-align: center;
font-size:24px;
color: #FFF;
}
.neo_expand_button {
width: 200px;
height: 35px;
background:#F00;
line-height: 35px;
text-align: center;
color: #FFF;
display: table;
cursor: pointer;
margin: 0 auto;
margin-top: 15px;
}
} /* End accordion header */
.neo_accord_content {
display: none;
background:#CCC;
color: #000;
width: 100%;
height: 150px;
margin: 0 auto;
}
} /* Accord container end */
} /* Accord section end */
} /* Container end */
} /* Wrappper end */
And JQuery:
// JavaScript Document
$(document).ready(function () {;
$("#neo_home_image").backstretch("http://fpoimagery.com/?t=px&w=960&h=400&bg=0ff&fg=000000 ");
$(".neo_expand_button").click(function () {
$(this).find('.neo_accord_content').slideToggle("slow");
//alert ("hello");
});
});
And here is my jsFiddle: http://jsfiddle.net/6brxu/

http://jsfiddle.net/6brxu/2/
$(document).ready(function () {;
$(".neo_expand_button").click(function (e) {
e.preventDefault();
$('.neo_accord_content').slideToggle("slow");
});
});
Your previous Javascript was searching for the class ".neo_accord_content" with ".neo_expand_button". I changed it to search the page for that class.