I have a problem where I'm trying to accomplish a change in the body background-color when I click a specific section of an accordion.
It goes as follows: I have three sections within one accordion. When I click on section #1 I want the body background-color to change. When I click on section #2 I want the body background-color to switch back to the original background-color and then change to the new one thats tied to section #2, and same goes on section #3 and so forth.
I have accomplished this with toggleClass when clicking between the diffrent sections, and it works all fine. But the problem comes when I click on the same section twice in a row. The background-color switches back to the original body background-color but then it comes back into the if-statement and activates the toggleClass once again, so the background switches to the section #1 background.
I want it to work like when clicking on the same section twice the original body background-color should stay as active.
Are there any simple solution to this? (I guess it is...)
$(document).ready(function() {
$('.accordion').on('click', function() {
$('body').removeClass('webbutveckling-1-body-background webbutveckling-2-body-background granssnittsdesign-body-background', 1000);
if($(this).is('.accordion-section-webbutveckling-1')){
$('body').toggleClass('webbutveckling-1-body-background', 1000);
} else if($(this).is('.accordion-section-webbutveckling-2')){
$('body').toggleClass('webbutveckling-2-body-background', 1000);
} else if($(this).is('.accordion-section-granssnittsdesign')){
$('body').toggleClass('granssnittsdesign-body-background', 1000);
}
});
});body {
background-color: #e68246;
}
/*----- Accordion -----*/
.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.accordion {
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:3px;
background:#f7f7f7;
}
/*----- Section Titles -----*/
.accordion-section-title {
width:100%;
padding:15px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#666;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
text-decoration:none;
}
.accordion-section-title.active, .accordion-section-title:hover {
background:#4c4c4c;
/* Type */
}
.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
}
/*----- Accordion heading -----*/
.accordion-section-content-heading {
border-bottom: 4px solid #cdcdcd;
}
/*----- Accordion ul-tasks -----*/
.accordion-ul-tasks {
padding: 0;
margin: 0;
list-style: none;
}
.accordion-ul-tasks li {
margin-bottom: 10px;
border: 1px solid black;
}
.accordion-ul-tasks a {
display: block;
color: #787;
text-decoration: none;
padding: 5px 10px;
transition: margin-left .4s;
}
.accordion-ul-tasks a:hover {
margin-left: 10px;
}
.accordion-ul-tasks a:before {
content: "> ";
}
.accordion-ul-tasks li:hover {
font-weight: bold;
}
/*----- Accordion Toggle Classes for body background -----*/
.webbutveckling-1-body-background {
background-color: #46aae6;
}
.webbutveckling-2-body-background {
background-color: red;
}
.granssnittsdesign-body-background {
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<body>
<div class="wrapper">
<main class="main-content">
<section class="accordion accordion-section-webbutveckling-1">
<section class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Webbutveckling 1</a>
<section id="accordion-1" class="accordion-section-content">
<h2 class="accordion-section-content-heading">Introduktion</h2>
<ul class="accordion-ul-tasks">
<li><a href="#" target="_blank">Länk till skolverket - Webbteknik</a></li>
<li><a href="#" target="_blank">Google Drive - Skapa ett konto</a></li>
<li><a href="#" target="_blank">Loggbok: Elevmall</a></li>
</ul>
</section> <!--end .accordion-section-content-->
</section> <!--end .accordion-section-->
</section> <!--end .accordion-->
<section class="accordion accordion-section-webbutveckling-2">
<section class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">Webbutveckling 2</a>
<section id="accordion-2" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</section> <!--end .accordion-section-content-->
</section> <!--end .accordion-section-->
</section> <!--end .accordion-->
<section class="accordion accordion-section-granssnittsdesign">
<section class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">Gränssnittsdesign</a>
<section id="accordion-3" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</section> <!--end .accordion-section-content-->
</section> <!--end .accordion-section-->
</section> <!--end .accordion-->
</main>
</div>