I am working on this project and am trying to change the background color of the accordion when it is open. I like that it's flush when it's closed, but do not like the white background when it's open.
I am also trying to change the way the arrows are situated, so that they are in a straighter line.
This is what I have so far:
console.log(1)
$(".accordion-button").click(function(){
console.log(2)
var dest = $(this).attr("data-bs-target");
$(dest)[0].scrollIntoView();
});
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}body {
background-image: linear-gradient(rgba(143,25,154,1), rgba(200, 5, 158, 0.8));
opacity: 1;
position: relative;
overflow: scroll;
}
.accordion-title {
font-variant-caps: titling-caps;
position: absoulte;
}
.accordion-button {
font-size: 20px;
font-family: Red Rose;
color: #FEB7EE !important;
}
.accordion-button:after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-header:collapse {background-color:black !important;}
.accordion-button collapse {
color: rgb(224, 16, 176);
}
h1 {
font-family: Red Rose;
color: #FEB7EE;
}
h2 {
font-family: Raleway;
color: #FEB7EE;
}
p {
font-family: Raleway;
}<!--html-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!--javascript-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="eng">
<head>
<link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<!--bootstrap-->
<title>Raspberry Pilot</title>
<!--intro-->
<h1 class="display-1">Raspberry Pi-lot</h1>
<h2 class="display-6">The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be surprised what it can do!</h1>
<!--accordion-->
<div class="accordion accordion-flush" id="accordionFlushExample">
<!--about-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushAbout">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about"()>
About
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body about"><p><strong>Raspberry Pi is a</strong> fully featured, low cost, tiny Linux computer that is an easy way to learn programming and computing.</p></div>
</div>
</div>
<!--ingredients-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushIngredients">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
What You'll Need
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100">
<h3>Raspberry Pi</h3>
<p>Go with models 3 and higher.</p>
<img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">
<h3>HDMI Monitor</h3>
<p>An HDMI TV works too!</p>
<img src="" alt="SD card icon" class="img-fluid" width="100" height="100">
<h3>SD Card</h3>
<p>Aim for at least 8GB.</p>
<img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">
<h3>USB Mouse</h3>
<p>You can switch to a wireless mouse later.</p>
<img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">
<h3>USB Keyboard</h3>
<p>You can switch to a wireless keyboard later.</p>
<img src="" class="img-fluid" alt="power supply icon" width="100" height="100">
<h3>Power Supply</h3>
<p>Standard 5V USB C or Micro depending on the model.</p>
</div>
</div>
</div>
<!--SetUp-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSetUp">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Set Up
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><h4>Set up your SD card.</h4>
<p>Install NOOBS via Raspbian, then insert it into the Raspberry Pi. </p>
<a href="url"> Link to download NOOBS </a>
<h4>Plug everything in.</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
<p>Make sure everything is plugged in before turning it on.</p>
</div>
</div>
</div>
<!--options-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushOptions">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
What Can You Do?
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><h4>Set up your SD card.</h4>
<p>Install NOOBS via Raspbian, then insert it into the Raspberry Pi. </p>
<a href="url"> Link to download NOOBS </a>
<h4>Plug everything in.</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
<p>Make sure everything is plugged in before turning it on.</p></div>
</div>
</div>
<!--python-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushPython">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
Code with Python
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><h4>Open Thonny</h4>
<p>Use Thonny to create new programs and systems on your Raspberry Pi </p>
<a href="url"> Link to see what you can do with Python </a>
<h4>Learn Python</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
</div>
</div>
</div>
<!--accessories-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushAccessories">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
Add Ons & Accessories
</button>
</h2>
<div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--sensehat-->
<div class="accordion-item" >
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
SenseHat
</button>
</h2>
<div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven" data-bs-parent="#accordionFlushExample">
<img src="" class="img-fluid" alt="SenseHat Demo" width="200" height="250">
<pre>
<code>
from sense_hat import SenseHat
sense = SenseHat()
# Define some colours
g = (0, 255, 0) # Green
b = (0, 0, 0) # Black
# Set up where each colour will display
creeper_pixels = [
g, g, g, g, g, g, g, g,
g, g, g, g, g, g, g, g,
g, b, b, g, g, b, b, g,
g, b, b, g, g, b, b, g,
g, g, g, b, b, g, g, g,
g, g, b, b, b, b, g, g,
g, g, b, b, b, b, g, g,
g, g, b, g, g, b, g, g
]
# Display these colours on the LED matrix
sense.set_pixels(creeper_pixels)
</code>
</pre>
</div>
</div>
<!--projects-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
SenseHat Projects
</button>
</h2>
<div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight" data-bs-parent="#accordionFlushEight">
<div class="accordion-body">
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">This will be a cool project idea.</p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Another cool project. </p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Last cool project goes here.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--resources-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushResources">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
Raspberry Pi Resources
</button>
</h2>
<div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine" data-bs-parent="#accordionFlushNine">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Link</li>
<li class="list-group-item">Another Link</li>
<li class="list-group-item">Another another link</li>
<li class="list-group-item">Fourth link</li>
<li class="list-group-item">Last link</li>
</ul>
</div>
</div>
</div>
<!--end tag-->
</div>
</div>
</body>
<link href="./stylesheet.css" rel="stylesheet"/>
<script src="script.js"></script>
</html>It is quite simple in your file stylesheet.css, add this code
.accordion-button:not(.collapsed) {
color: #0c63e4;
background-color: #FEB7EE;
}