I have this navigation bar with position: sticky, but it stops when it reaches the top of the side navigation and the content of the page. I can't change the position tofixed, because then the .ad above it won't be visible. I have added the scripts that belong to the side navigation and the content.
How do I make my navigation bar go on, past the content and side navigation?
function sortBooks(upDown) {
var columns = document.getElementsByClassName("column")
function pricesToArray(columns) {
var prices = [];
for (var index = 0; index < columns.length; index++) {
var price = columns[index].querySelector('.price').innerText;
var priceInt = price.substr(1, price.length).replace(',', '.');
prices[index] = parseFloat(priceInt, 10);
}
return prices;
}
var prices = pricesToArray(columns);
function selectionSort(arr, upDown) {
var minIdx, temp,
len = arr.length;
for (var i = 0; i < len; i++) {
minIdx = i;
for (var j = i + 1; j < len; j++) {
if (upDown) {
if (arr[j] < arr[minIdx]) {
minIdx = j;
}
} else {
if (arr[j] > arr[minIdx]) {
minIdx = j;
}
}
}
temp = arr[i];
arr[i] = arr[minIdx];
//replace columns
replaceColumns(i,minIdx);
arr[minIdx] = temp;
}
return arr;
}
function replaceColumns(i,minIdx) {
var temporaryColumn = columns[i].innerHTML;
columns[i].innerHTML = columns[minIdx].innerHTML;
columns[minIdx].innerHTML = temporaryColumn;
}
var pricesSorted = selectionSort(prices,upDown);
}
function sortList() {
var list, i, switching, b, shouldSwitch;
list = document.getElementById("id01");
switching = true;
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// start by saying: no switching is done:
switching = false;
b = list.getElementsByTagName("h4");
// Loop through all list-items:
for (i = 0; i < (b.length - 1); i++) {
// start by saying there should be no switching:
shouldSwitch = false;
/* check if the next item should
switch place with the current item: */
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
/* if next item is alphabetically
lower than current item, mark as a switch
and break the loop: */
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark the switch as done: */
b[i].parentNode.parentNode.parentNode.insertBefore(b[i + 1].parentNode.parentNode, b[i].parentNode.parentNode);
switching = true;
}
}
}
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
var coll = document.getElementsByClassName("collapsible2");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("activee");
current[0].className = current[0].className.replace(" activee", "");
this.className += " activee";
});
}
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}body {
margin: 0;
background-color: #fcf3e3;
}
* {box-sizing: border-box;}
.navbar {
list-style-type: none;
background-color: #f9eedd;
width: 100%;
margin: 0;
padding: 0 20%;
z-index: 10;
position: sticky;
top: 0;
height: 7vmin;
}
.navbar li a{
display: block;
color: #8e8275;
text-decoration: none;
padding: 1.5vmin 1vmin 1.2vmin 1vmin;
margin: 1.3vmin;
}
.navbar li.links {float: left;}
.navbar li.rechts {float: right;}
.navbar li a:hover {color: #252118;}
.navbar .dropdown-content {
display: none;
position: absolute;
background-color: #fef6e9;
min-width: 13vmin;
z-index: 10;
top: 7vmin;
margin: 0 2vmin;
}
.navbar .dropdown-content a {
text-align: left;
margin: 0;
padding: 1.5vmin 1.3vmin;
}
.navbar li.icon {display: none;}
.ad {
background-color: #fbf4e9;
text-align: center;
font-size: 1.5vmin;
padding: .5vmin;
}
.webshoptekst {
margin: 5vmin 10% 0 10%;
}
.row {margin-left: 27vmin;}
.column {
float: left;
display: none;
padding: 0 1.5vmin 1.5vmin 0;
width: 33.3%;
}
.kaartje {
background-color: #FFFF;
padding: 1.2vmin;
text-align: center;
max-width: 20vmin;
height: 40vmin;
position: relative;
}
.kaartje div {height: 18vmin;}
.kaartje div > img {height: 100%;}
h4 {
margin: 0;
font-size: 1.9vmin;
min-height: 6vmin;
}
h6 {
margin: 0;
font-size: 1.4vmin;
font-weight: normal;
}
.price {
color: #777676;
margin-top: .8vmin;
font-size: 1.4vmin;
}
.winkelwagen{
bottom: 0;
position: absolute;
left: 0;
padding: 1.2vmin;
width: 100%;
}
.kaartje button {
border: none;
outline: none;
padding: 1vmin;
color: #FFFF;
background-color: #000;
cursor: pointer;
font-size: 1vmin;
}
.kaartje button:hover {opacity: 0.7;}
.show {display: block;}
.sidenav {
width: 25vmin;
float: left;
box-shadow: 0px 1px 3px 0px #c4b29c;
}
.dropdown-btn {
padding: .6vmin .8vmin .6vmin 1.6vmin;
font-size: 2.5vmin;
color: #655f5a;
border: none;
background-color: #f5e8d2;
cursor: pointer;
outline: none;
width: 100%;
text-align:left;
}
.dropdown-container {
display: none;
background-color: #efe6d8;
padding-left: .8vmin;
}
.collapsible2 {
outline: none;
border: none;
color: #655f5a;
background-color: #efe6d8;
cursor: pointer;
width: 24vmin;
font-size: 2.4vmin;
text-align: left;
padding: .6vmin .8vmin .6vmin 1.6vmin;
}
.dropdown-btn:hover, .collapsible2:hover {opacity: 0.7;}
.collapsible2:after {
content: '\002B';
float: right;
}
.collapsible2 .active:after {content: "\2212";}
.ccontent {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s cubic-bezier(0, 0, 0.2, 1);
padding-left: .8vmin;
}
.btn {
display: block;
position: relative;
padding-left: 3.5vmin;
margin-bottom: 1.2vmin;
cursor: pointer;
font-size: 1.8vmin;
}
.btn input {display: none;}
.checkmark {
position: absolute;
left: 0;
height: 2vmin;
width: 2vmin;
background-color: #eee;
border-radius: 50%;
box-shadow: inset 0 0 4px 0px #b5a99b;
}
.btn:hover input ~ .checkmark {background-color: #dcdcdc;}
.btn.activee input:checked ~ .checkmark {background-color: #cccccc;}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.btn input:checked ~ .checkmark:after {display: block;}
.btn .checkmark:after {
top: 0.68vmin;
left: 0.68vmin;
width: 0.64vmin;
height: 0.64vmin;
border-radius: 50%;
background: #98948e;
}<div class="ad">Lorem ipsum dolor sit amet, consec</div>
<ul class="navbar" id="myTopnav">
<li class="links"><a href="index.html">adipiscing</a></li>
<li class="dropdown links"><a href="javascript:void(0)">elit <i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="javascript:void(0)">Loren</a>
<a href="javascript:void(0)">ipsum</a></div> </li>
<li class="rechts"><a href="over-mij.html">sed</a></li>
<li class="rechts"><a href="webshop.html" class="active">do</a></li>
<li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
<div class="webshoptekst">
<h1>do</h1>
<p>eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="sidenav">
<button class="dropdown-btn"><i class="fa fa-bars"></i> Filters</button>
<div class="dropdown-container" id="myBtnContainer">
<button type="button" class="collapsible2">Sorteren op</button>
<div class="ccontent">
<label class="btn activee" onclick="filterSelection('all')">Toon alles<input type="radio" name="radio"><span class="checkmark"></span></label>
<label class="btn" onclick="sortList()">Alfabetisch<input type="radio" name="radio"><span class="checkmark"></span></label>
<label class="btn" onclick="sortBooks(true)">Prijs oplopend<input type="radio" name="radio"><span class="checkmark"></span></label>
<label class="btn" onclick="sortBooks(false)">Prijs aflopend<input type="radio" name="radio"><span class="checkmark"></span></label>
</div>
<button type="button" class="collapsible2">Talen</button>
<div class="ccontent">
<label class="btn" onclick="filterSelection('Nederlands')">Dutch<input type="radio" name="radio"><span class="checkmark"></span></label>
<label class="btn" onclick="filterSelection('Engels')">Engels<input type="radio" name="radio"><span class="checkmark"></span></label>
</div>
</div>
</div>
<div class="row" id="id01">
<div class="column English">
<div class="kaartje">
<div><img src="webshopOT.jpg" alt="Oliver Twist"></div>
<h4>Oliver Twist</h4>
<h6>Charles Dickens</h6>
<p class="price">€9,99</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column English">
<div class="kaartje">
<div><img src="webshopEAP.jpg" alt="The Complete Short Stories"></div>
<h4>The Complete Short Stories</h4>
<h6>Edgar Allan Poe</h6>
<p class="price">€7,98</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column Nederlands">
<div class="kaartje">
<div><img src="webshopRJ.jpg" alt="Romeo en Julia"></div>
<h4>Romeo en Julia</h4>
<h6>William Shakespeare</h6>
<p class="price">€14,55</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column Nederlands">
<div class="kaartje">
<div><img src="webshopHP1.jpg" alt="Harry Potter en de Steen der Wijzen"></div>
<h4>Harry Potter en de Steen der Wijzen</h4>
<h6>J. K. Rowling</h6>
<p class="price">€16,58</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column Nederlands">
<div class="kaartje">
<div><img src="webshopHP2.jpg" alt="Harry Potter en de Geheime Kamer"></div>
<h4>Harry Potter en de Geheime Kamer</h4>
<h6>J. K. Rowling</h6>
<p class="price">€17,19</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column Nederlands">
<div class="kaartje">
<div><img src="webshopHP3.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>
<h4>Harry Potter en de Gevangene van Azkaban</h4>
<h6>J. K. Rowling</h6>
<p class="price">€17,97</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column Nederlands">
<div class="kaartje">
<div><img src="webshopHP4.jpg" alt="Harry Potter en de Vuurbeker"></div>
<h4>Harry Potter en de Vuurbeker</h4>
<h6>J. K. Rowling</h6>
<p class="price">€18,43</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column English">
<div class="kaartje">
<div><img src="webshopABP.jpg" alt="All the Bright Places"></div>
<h4>All the Bright Places</h4>
<h6>Jennifer Niven</h6>
<p class="price">€13,29</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column English">
<div class="kaartje">
<div><img src="webshopTF.jpg" alt="The Fault in Our Stars"></div>
<h4>The Fault in our Stars</h4>
<h6>John Green</h6>
<p class="price">€11,55</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
</div>
</div>Since its contents of <div class="row"> are all floating, it has no height. Add overflow: auto; to it and your nav will stick correctly.
function sortBooks(upDown) {
var columns = document.getElementsByClassName("column")
function pricesToArray(columns) {
var prices = [];
for (var index = 0; index < columns.length; index++) {
var price = columns[index].querySelector('.price').innerText;
var priceInt = price.substr(1, price.length).replace(',', '.');
prices[index] = parseFloat(priceInt, 10);
}
return prices;
}
var prices = pricesToArray(columns);
function selectionSort(arr, upDown) {
var minIdx, temp,
len = arr.length;
for (var i = 0; i < len; i++) {
minIdx = i;
for (var j = i + 1; j < len; j++) {
if (upDown) {
if (arr[j] < arr[minIdx]) {
minIdx = j;
}
} else {
if (arr[j] > arr[minIdx]) {
minIdx = j;
}
}
}
temp = arr[i];
arr[i] = arr[minIdx];
//replace columns
replaceColumns(i, minIdx);
arr[minIdx] = temp;
}
return arr;
}
function replaceColumns(i, minIdx) {
var temporaryColumn = columns[i].innerHTML;
columns[i].innerHTML = columns[minIdx].innerHTML;
columns[minIdx].innerHTML = temporaryColumn;
}
var pricesSorted = selectionSort(prices, upDown);
}
function sortList() {
var list, i, switching, b, shouldSwitch;
list = document.getElementById("id01");
switching = true;
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// start by saying: no switching is done:
switching = false;
b = list.getElementsByTagName("h4");
// Loop through all list-items:
for (i = 0; i < (b.length - 1); i++) {
// start by saying there should be no switching:
shouldSwitch = false;
/* check if the next item should
switch place with the current item: */
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
/* if next item is alphabetically
lower than current item, mark as a switch
and break the loop: */
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark the switch as done: */
b[i].parentNode.parentNode.parentNode.insertBefore(b[i + 1].parentNode.parentNode, b[i].parentNode.parentNode);
switching = true;
}
}
}
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
var coll = document.getElementsByClassName("collapsible2");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("activee");
current[0].className = current[0].className.replace(" activee", "");
this.className += " activee";
});
}
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}body {
margin: 0;
background-color: #fcf3e3;
}
* {
box-sizing: border-box;
}
.navbar {
list-style-type: none;
background-color: #f9eedd;
box-shadow: 0px 5px 5px -6px #c4b29c;
font-family: Georgia, "Times New Roman", Serif;
width: 100%;
margin: 0;
padding: 0 20%;
z-index: 10;
position: sticky;
top: 0;
height: 7vmin;
}
.navbar li a {
display: block;
color: #8e8275;
text-decoration: none;
transition: 0.3s;
letter-spacing: .1vmin;
font-size: 1.6vmin;
padding: 1.5vmin 1vmin 1.2vmin 1vmin;
margin: 1.3vmin;
}
.navbar li.links {
float: left;
}
.navbar li.rechts {
float: right;
}
.navbar li a:hover {
color: #252118;
}
.navbar li a.active,
.navbar .dropdown-content a.active {
text-decoration: underline
}
.navbar .dropdown-content a.active {
background-color: #f3e9da;
}
.navbar .dropdown-content {
display: none;
position: absolute;
background-color: #fef6e9;
min-width: 13vmin;
box-shadow: 0px 2px 5px .1px rgba(0, 0, 0, 0.2);
z-index: 10;
top: 7vmin;
margin: 0 2vmin;
}
.navbar .dropdown-content a {
text-align: left;
margin: 0;
padding: 1.5vmin 1.3vmin;
}
.navbar .dropdown-content a:hover {
background-color: #f7eedc;
}
.navbar .dropdown:hover .dropdown-content {
display: block;
}
.navbar li.icon {
display: none;
}
.ad {
background-color: #fbf4e9;
text-align: center;
font-size: 1.5vmin;
padding: .5vmin;
}
.webshoptekst {
letter-spacing: .06vmin;
font-family: Arial, Verdana, Sans-serif;
margin: 5vmin 10% 0 10%;
}
.row {
margin-left: 27vmin;
overflow: auto;
}
.column {
float: left;
display: none;
padding: 0 1.5vmin 1.5vmin 0;
width: 33.3%;
}
.kaartje {
background-color: #FFFF;
padding: 1.2vmin;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 20vmin;
height: 40vmin;
position: relative;
}
.kaartje div {
height: 18vmin;
}
.kaartje div>img {
height: 100%;
}
h4 {
margin: 0;
font-size: 1.9vmin;
min-height: 6vmin;
}
h6 {
margin: 0;
font-size: 1.4vmin;
font-weight: normal;
}
.price {
color: #777676;
margin-top: .8vmin;
font-size: 1.4vmin;
}
.winkelwagen {
bottom: 0;
position: absolute;
left: 0;
padding: 1.2vmin;
width: 100%;
}
.kaartje button {
border: none;
outline: none;
padding: 1vmin;
color: #FFFF;
background-color: #000;
cursor: pointer;
font-size: 1vmin;
}
.kaartje button:hover {
opacity: 0.7;
}
.show {
display: block;
}
.sidenav {
width: 25vmin;
float: left;
box-shadow: 0px 1px 3px 0px #c4b29c;
}
.dropdown-btn {
padding: .6vmin .8vmin .6vmin 1.6vmin;
font-size: 2.5vmin;
color: #655f5a;
border: none;
background-color: #f5e8d2;
cursor: pointer;
outline: none;
width: 100%;
text-align: left;
}
.dropdown-container {
display: none;
background-color: #efe6d8;
padding-left: .8vmin;
}
.collapsible2 {
outline: none;
border: none;
color: #655f5a;
background-color: #efe6d8;
cursor: pointer;
width: 24vmin;
font-size: 2.4vmin;
text-align: left;
padding: .6vmin .8vmin .6vmin 1.6vmin;
}
.dropdown-btn:hover,
.collapsible2:hover {
opacity: 0.7;
}
.collapsible2:after {
content: '\002B';
float: right;
}
.collapsible2 .active:after {
content: "\2212";
}
.ccontent {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s cubic-bezier(0, 0, 0.2, 1);
padding-left: .8vmin;
}
.btn {
display: block;
position: relative;
padding-left: 3.5vmin;
margin-bottom: 1.2vmin;
cursor: pointer;
font-size: 1.8vmin;
}
.btn input {
display: none;
}
.checkmark {
position: absolute;
left: 0;
height: 2vmin;
width: 2vmin;
background-color: #eee;
border-radius: 50%;
box-shadow: inset 0 0 4px 0px #b5a99b;
}
.btn:hover input~.checkmark {
background-color: #dcdcdc;
}
.btn.activee input:checked~.checkmark {
background-color: #cccccc;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.btn input:checked~.checkmark:after {
display: block;
}
.btn .checkmark:after {
top: 0.68vmin;
left: 0.68vmin;
width: 0.64vmin;
height: 0.64vmin;
border-radius: 50%;
background: #98948e;
}<div class="ad">Lorem ipsum dolor sit amet, consec</div>
<ul class="navbar" id="myTopnav">
<li class="links"><a href="index.html">adipiscing</a></li>
<li class="dropdown links"><a href="javascript:void(0)">elit <i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a href="javascript:void(0)">Loren</a>
<a href="javascript:void(0)">ipsum</a></div>
</li>
<li class="rechts"><a href="over-mij.html">sed</a></li>
<li class="rechts"><a href="webshop.html" class="active">do</a></li>
<li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
<div class="webshoptekst">
<h1>do</h1>
<p>eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="sidenav">
<button class="dropdown-btn"><i class="fa fa-bars"></i> Filters</button>
<div class="dropdown-container" id="myBtnContainer">
<button type="button" class="collapsible2">Sorteren op</button>
<div class="ccontent">
<label class="btn activee" onclick="filterSelection('all')">Toon alles<input type="radio" name="radio"><span class="checkmark"></span></label>
<label class="btn" onclick="sortList()">Alfabetisch<input type="radio" name="radio"><span class="checkmark"></span></label>
<label class="btn" onclick="sortBooks(true)">Prijs oplopend<input type="radio" name="radio"><span class="checkmark"></span></label>
<label class="btn" onclick="sortBooks(false)">Prijs aflopend<input type="radio" name="radio"><span class="checkmark"></span></label>
</div>
<button type="button" class="collapsible2">Talen</button>
<div class="ccontent">
<label class="btn" onclick="filterSelection('Nederlands')">Dutch<input type="radio" name="radio"><span class="checkmark"></span></label>
<label class="btn" onclick="filterSelection('Engels')">Engels<input type="radio" name="radio"><span class="checkmark"></span></label>
</div>
</div>
</div>
<div class="row" id="id01">
<div class="column English">
<div class="kaartje">
<div><img src="webshopOT.jpg" alt="Oliver Twist"></div>
<h4>Oliver Twist</h4>
<h6>Charles Dickens</h6>
<p class="price">€9,99</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column English">
<div class="kaartje">
<div><img src="webshopEAP.jpg" alt="The Complete Short Stories"></div>
<h4>The Complete Short Stories</h4>
<h6>Edgar Allan Poe</h6>
<p class="price">€7,98</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column Nederlands">
<div class="kaartje">
<div><img src="webshopRJ.jpg" alt="Romeo en Julia"></div>
<h4>Romeo en Julia</h4>
<h6>William Shakespeare</h6>
<p class="price">€14,55</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column Nederlands">
<div class="kaartje">
<div><img src="webshopHP1.jpg" alt="Harry Potter en de Steen der Wijzen"></div>
<h4>Harry Potter en de Steen der Wijzen</h4>
<h6>J. K. Rowling</h6>
<p class="price">€16,58</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column Nederlands">
<div class="kaartje">
<div><img src="webshopHP2.jpg" alt="Harry Potter en de Geheime Kamer"></div>
<h4>Harry Potter en de Geheime Kamer</h4>
<h6>J. K. Rowling</h6>
<p class="price">€17,19</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column Nederlands">
<div class="kaartje">
<div><img src="webshopHP3.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>
<h4>Harry Potter en de Gevangene van Azkaban</h4>
<h6>J. K. Rowling</h6>
<p class="price">€17,97</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column Nederlands">
<div class="kaartje">
<div><img src="webshopHP4.jpg" alt="Harry Potter en de Vuurbeker"></div>
<h4>Harry Potter en de Vuurbeker</h4>
<h6>J. K. Rowling</h6>
<p class="price">€18,43</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column English">
<div class="kaartje">
<div><img src="webshopABP.jpg" alt="All the Bright Places"></div>
<h4>All the Bright Places</h4>
<h6>Jennifer Niven</h6>
<p class="price">€13,29</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
<div class="column English">
<div class="kaartje">
<div><img src="webshopTF.jpg" alt="The Fault in Our Stars"></div>
<h4>The Fault in our Stars</h4>
<h6>John Green</h6>
<p class="price">€11,55</p>
<p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
</div>
</div>
</div>
</div>