We Keep Coding

Header broken and css animation dont work

My header is moving up and down when I scroll in the mobile version of my website. And when I close my hamburger-menu the text doesn't move with the animation. I tried solving it but I can't figure it out. Mr teacher didn't know how to solve the problem so I hope u guys can help <3
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #1A1A1A;
overflow-x: hidden;
color: #fff;
z-index: 1;
font-family: "Inter", sans-serif;
font-weight: 300;
overflow-y: scroll;
}
#wrapper {
display: grid;
grid-template-columns: 100vw;
grid-template-rows: 90vh 40vh 70vh 55vh 10vh 1fr 1fr 15rem;
grid-template-areas: "a" "b" "c" "d" "z" "e" "f" "g";
}
#slideshow {
grid-area: a;
background-image: url(../bilder/test.jpg);
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#starttext {
top: 7rem;
position: relative;
}
#starttext p {
font-size: 0.8rem;
margin-top: 1rem;
}
h1,
h2 {
margin-left: 1.2rem;
margin-right: 1.2rem;
}
h1 {
font-size: 2.5rem;
}
h2 {
margin-bottom: 1rem;
margin-top: 2rem;
}
p {
margin: 0 1.2rem 2rem 1.2rem;
font-size: 0.85rem;
line-height: 1.6;
font-weight: 100;
}
#introduktion {
grid-area: b;
}
#bakgrund {
grid-area: c;
background-color: #cacbcc;
}
#bakgrund p,
#bakgrund h2,
#problemformulering p,
#problemformulering h2 {
color: #212529;
}
#box2 {
grid-area: z;
background-color: rgb(31, 31, 31);
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
#problemformulering {
grid-area: d;
background-color: #cacbcc;
}
#lösning {
grid-area: e;
}
#diskussion {
grid-area: f;
}
#footer {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
grid-area: g;
background-color: rgb(31, 31, 31);
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.nav-container {
z-index: 300;
}
#blur-box {
height: 3.5rem;
width: 100vw;
background: rgba(255, 255, 255, 0.486);
backdrop-filter: blur(8px);
}
header {
position: fixed;
overflow: hidden;
width: 100%;
height: 3rem;
background: #1a1a1a83;
backdrop-filter: blur(8px);
}
.nav-container nav {
height: 100%;
width: 100%;
padding: 0 32px;
}
nav .desktop-nav {
list-style: none;
}
nav .desktop-nav li button,
nav .desktop-nav li a {
color: #ffffff;
text-decoration: none;
font-family: "Inter", sans-serif;
font-size: 1.5rem;
background: none;
border: none;
}
.nav-container .desktop-nav {
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0vh;
background: #303030f3;
justify-content: start;
overflow: hidden;
z-index: -1;
transition: all 1000ms ease;
}
.nav-container.active .desktop-nav {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.nav-container .desktop-nav li {
width: 100%;
}
.nav-container .desktop-nav li a {
padding: 30px 0;
width: 100%;
font-size: 1.5rem;
opacity: 0;
}
.border {
border-bottom: 1px solid #616161;
}
#yes {
width: 80%;
}
.nav-container.active .desktop-nav li a {
opacity: 1;
}
nav .mobile-nav {
display: flex;
width: 100%;
justify-content: space-between;
list-style: none;
display: flex;
justify-content: flex-end;
}
nav .menu-icon-container {
width: 20px;
height: 44px;
display: flex;
align-items: center;
cursor: pointer;
}
nav .menu-icon {
position: relative;
width: 100%;
}
nav .menu-icon .line-1,
nav .menu-icon .line-2 {
position: absolute;
height: 1px;
width: 100%;
background: #fff;
transition-property: transform, top;
transition-delay: 0ms, 160ms;
transition-duration: 200ms;
}
nav .menu-icon .line-1 {
top: -4px;
}
nav .menu-icon .line-2 {
top: 4px;
}
/* De två under är hämtat från någon bemsida */
.nav-container.active nav .menu-icon-container .menu-icon .line-1 {
top: 0;
transform: rotateZ(45deg);
transition-property: top, transform;
transition-delay: 0ms, 160ms;
transition-duration: 200ms;
}
.nav-container.active nav .menu-icon-container .menu-icon .line-2 {
top: 0;
transform: rotateZ(-45deg);
transition-property: top, transform;
transition-delay: 0ms, 160ms;
transition-duration: 200ms;
}
input,
div,
span,
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#media only screen and (min-width: 600px) {}
#media only screen and (min-width: 769px) {
.center {
padding-right: 35rem;
display: block;
padding-left: 35rem;
}
}
<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">
<title>Buller</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../projekt3.2/style/style.css">
</head>
<body>
<header class="nav-container">
<nav>
<ul class="mobile-nav">
<li>
<div class="menu-icon-container">
<div class="menu-icon">
<span class="line-1"></span>
<span class="line-2"></span>
</div>
</div>
</li>
<ul class="desktop-nav">
<div id="yes">
<li>
<button id="knapp1">Introduktion</button>
</li>
<li>
<button id="knapp2">Bakgrund</button>
</li>
<li>
<button id="knapp3">Problemformulering</button>
</li>
<li>
<button id="knapp4">Lösning</button>
</li>
<li>
<button id="knapp5">Diskussion</button>
</li>
<li>
Bilder
</li>
</div>
</ul>
</nav>
</header>
<main id="wrapper">
<div id="slideshow">
<div class="center" id="starttext">
<h1>Framtids-<br>staden...</h1>
<p>Ett projekt av Benim co som Lorem ipsum dolor <br> sit, amet consectetur adipisicing elit. Quia vero <br> sit, amet consectetur adipisicing elit. Quia vero</p>
</div>
<div clsas="center" id="blur-box">
</div>
</div>
<div class="center" id="introduktion">
<h2>Introduktion</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sconsectetur adipisicing eliconsectetur adipisicing eli consectetur adipisicing eli Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, suscipit!Lorem ipsum,
dolor sit amet consectetur adipisicing elit. Unde est natus sconsectetur adipisicing eliconsectetur adipisicing eli consectetur adipisicing eli Lorem Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="center" id="bakgrund">
<h2>Bakgrund</h2>
<p>Motorvägen som leder genom Nacka, Värmdöleden, är en vältrafikerad väg som sträcker sig mellan Stockholm och Stavsnäs i Stockholms län. På grund av att vägen går genom stora delar av Nacka, samt är mycket trafikerad, innebär det att vägen är en
stor bidragande faktor till buller i kommunen. De åtgärder som redan gjorts, såsom bullerplank, är inte tillräckliga då vägen är för bred för att planken ska göra någon större nytta . Oljud från bilarna och vägen kan ta sig över planket och bidrar
till en störande miljö i kommunen.</p>
<p>I takt med att Nacka och Värmdö ökar kraftigt i befolkningsmängd, varav Nacka hade en ökning på 4,4% mellan åren 2018-2021 och Värmdö hade 4,1%, bidrar det att vägarna kommer att bli ännu mer trafikerade än vad de redan är idag. En sådan befolkningsökning
innebär att Nacka har den 28:e högsta ökningen i landet och Värmdö den 32:a. När fler bilar befinner sig inom kommunerna kommer trafiken att öka vilket även innebär att bullret kommer att bli värre. </p>
</div>
<div id="box2">
</div>
<div class="center" id="problemformulering">
<h2>Problemformulering</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sint qui praesentium corporis! Quaerat dolores dicta rerum velit alias error optio? Voluptatem eligendi non nulla laborum velit iusto deleniti sint? Eaque eveniet voluptatibus,
impedit facere quo nulla? Officia maxime delectus rem facere ea ratione labore, molestias sit sed fuga quia deleniti, corrupti maiores sint quibusdam reiciendis asperiores inventore reprehenderit commodi impedit cumque tempore assumenda cupiditate?
Dicta nesciunt dignissimos aspernatur hic! Illum dolorum quos id debitis explicabo ut nam ullam aliquam maxime doloremque, impedit dolorem culpa necessitatibus accusamus, dolor illo ab nostrum optio? Temporibus cupiditate fugiat commodi possimus
repellendus!
</p>
</div>
<div class="center" id="lösning">
<h2>Lösning</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sint qui praesentium corporis! Quaerat dolores dicta rerum velit alias error optio? Voluptatem eligendi non nulla laborum velit iusto deleniti sint? Eaque eveniet voluptatibus,
impedit facere quo nulla? Officia maxime delectus rem facere ea ratione labore, molestias sit sed fuga quia deleniti, corrupti maiores sint quibusdam reiciendis asperiores inventore reprehenderit commodi impedit cumque tempore assumenda cupiditate?
Dicta nesciunt dignissimos aspernatur hic! Illum dolorum quos id debitis explicabo ut nam ullam aliquam maxime doloremque, impedit dolorem culpa necessitatibus accusamus, dolor illo ab nostrum optio? Temporibus cupiditate fugiat commodi possimus
repellendus!
</p>
</div>
<div class="center" id="diskussion">
<h2>Diskussion</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde est natus sint qui praesentium corporis! Quaerat dolores dicta rerum velit alias error optio? Voluptatem eligendi non nulla laborum velit iusto deleniti sint? Eaque eveniet voluptatibus,
impedit facere quo nulla? Officia maxime delectus rem facere ea ratione labore, molestias sit sed fuga quia deleniti, corrupti maiores sint quibusdam reiciendis asperiores inventore reprehenderit commodi impedit cumque tempore assumenda cupiditate?
Dicta nesciunt dignissimos aspernatur hic! Illum dolorum quos id debitis explicabo ut nam ullam aliquam maxime doloremque, impedit dolorem culpa necessitatibus accusamus, dolor illo ab nostrum optio? Temporibus cupiditate fugiat commodi possimus
repellendus!
</p>
</div>
<div class="center" id="footer">
<p>Här är benims footer (fast den är en div hihi)</p>
</div>
</main>
<script src="../projekt3.2/script/js.js"></script>
</body>
I don't it to scroll up and down when I scroll :D

accordions are disappearing when I open the accordion beside it and disappearing after I close that accordion

I'm using accordions for my site (as seen in this video), but when I open a accordion, the accordion beside it opens as well and when I close it, the accordion beside it disappears 💀
I don't know why this happens.
(PS: ignore the snow that was just some testing)
var acc = document.getElementsByClassName("accordion-card");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion-wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
position: relative;
margin-top: 25px;
}
.accordion-card {
background-color: rgba(182, 210, 253, 0.041);
border-radius: 10px;
width: 30vw;
max-width: 385px;
min-width: 350px;
/*height: 70px;*/
border: 1px solid rgba(153, 196, 239, 0.121);
position: relative;
}
.accordion-header {
color: rgba(255, 255, 255, 0.841);
font-weight: 600;
font-size: 1.25rem;
padding: 1rem 1.5rem 0.8rem 1.3rem;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
/*border-bottom: 1px solid rgba(153, 196, 239, 0.121);*/
}
.accordion-content {
color: rgba(255, 255, 255, 0.658);
font-weight: 300;
font-size: 1rem;
/*padding-top: 1rem;*/
/*padding-bottom: 1rem;*/
padding-left: 1rem;
padding-right: 1.3rem;
line-height: 1.5em;
/* hide the content until shown */
height: 0;
overflow: hidden;
transition: 0.5s;
overflow-y: auto;
}
.accordion-header::after {
content: '\003E';
font-size: 2rem;
font-weight: 400;
position: absolute;
right: 1rem;
}
.accordion-card.active .accordion-content {
height: 150px;
padding: 1rem 1rem 1rem 1.3rem;
}
.accordion-card.active .accordion-header::after{
transform: rotate(90deg);
transition: ease-in-out 0.5s;
}
<div class="accordion-wrapper">
<div class="accordion-card">
<div class="accordion-header">
Card 1
</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 2</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 3</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 4</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 5</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
<div class="accordion-card">
<div class="accordion-header">Card 6</div>
<div class="accordion-content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque
nesciunt vero sunt. Ad eveniet maiores quidem quis id animi
dolor sequi perspiciatis blanditiis ut provident vel unde
aliquam.
</div>
</div>
</div>
I expected only the accordion I opened to open, not others beside it. Also, if any of you guys could help me solve the problem of them disappearing unexpectedly, that would be a great help.

There are 2 problems in you code:
I'm not sure why you are toggling the visibility of the next Sibling element in JS. This is what causes the blocks to disappear.
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
Removing this part of the code now resolves the blocks disappearing.
The blocks now stop disappearing, but they still "open". They don't really open they just stretch their titles, because of the CSS Flex. There is easy CSS solution for that:
.accordion-card {
max-height: 70px;
}
.accordion-card.active {
max-height: none;
}
We fix the max-height to 70px for all, so they don't get enlarged. and remove the max height for the active one. Then only the active one will have full height.
Here is a working JS Filled example with all the changes.
https://jsfiddle.net/s612pbmk/1/

Why does parent::before {width: inherit; position: absolute} let child specify the % width of the grandparent?

Can someone please explain to me why the solution to the following problem works?
Problem:
Make the child div's width 100% to its grandparent's width, while the parent's width is much wider.
Solution:
Set grandparent display: flex,
Set parent::before {content: ""; width: inherit; position: absolute;}
Set child width: 100%.
The described solution is great, compared to position: absolute directly on child, because there is no need to tinker with the top alignment etc.
See answer and fiddle by RGLSV:
Child take width % from parents parent
http://jsfiddle.net/9qkwkzf2/
Here is the tab slider I build with this solution, if someone is interested:
const tabButtons = document.querySelectorAll(".tab-btn");
const tabContent = document.querySelector(".tab-content");
tabButtons.forEach((btn, i) => {
tabButtons[i].addEventListener("click", () => {
document
.querySelector(".tab-btn.active")
.classList.remove("active");
tabButtons[i].classList.add("active");
tabContent.style.marginLeft = `calc(-${i}*100%`;
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
color: #f2f2f2;
}
.tabs-container {
width: 500px;
height: 200px;
background: #f2f2f2;
color: rgb(21, 105, 153);
}
.tabs {
display: grid;
grid-auto-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"btn-1 btn-2 btn-3 btn-4"
"main main main main";
height: 100%;
overflow: hidden;
}
.tab-btn {
cursor: pointer;
}
.tab-btn:nth-child(1) {
grid-area: btn-1;
}
.tab-btn:nth-child(2) {
grid-area: btn-2;
}
.tab-btn:nth-child(3) {
grid-area: btn-3;
}
.tab-btn:nth-child(4) {
grid-area: btn-4;
}
.tab-content {
position: relative;
height: 100%;
width: calc(4 * 100%);
grid-area: main;
display: flex;
transition: all 0.3s ease-in-out;
}
.tab-content:before {
content: "";
position: absolute;
width: inherit;
}
.tab-content > div {
height: 100%;
width: 100%;
padding: 1rem;
}
.tab-btn {
border: none;
padding: 1rem;
border-radius: inherit;
background: #dddddd;
border: 1px solid #ccc;
transition: all 0.3s ease-in-out;
}
.tab-btn.active {
background: #f2f2f2;
transition: all 0.3s ease-in-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tabs</title>
</head>
<body>
<div class="tabs-container">
<div class="tabs">
<button class="tab-btn active">Tab 1</button>
<button class="tab-btn">Tab 2</button>
<button class="tab-btn">Tab 3</button>
<button class="tab-btn">Tab 4</button>
<div class="tab-content">
<div>
<h1>Tab 1</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Corrupti facere sit aspernatur itaque? Sed
similique libero quis earum neque? Provident rem
neque nisi assumenda ducimus itaque, in commodi quas
ea illo unde suscipit iste nam voluptates ipsa illum
distinctio pariatur!
</p>
</div>
<div>
<h1>Tab 2</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Corrupti facere sit aspernatur itaque? Sed
similique libero quis earum neque? Provident rem
neque nisi assumenda ducimus itaque, in commodi quas
ea illo unde suscipit iste nam voluptates ipsa illum
distinctio pariatur!
</p>
</div>
<div>
<h1>Tab 3</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Corrupti facere sit aspernatur itaque? Sed
similique libero quis earum neque? Provident rem
neque nisi assumenda ducimus itaque, in commodi quas
ea illo unde suscipit iste nam voluptates ipsa illum
distinctio pariatur!
</p>
</div>
<div>
<h1>Tab 4</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Corrupti facere sit aspernatur itaque? Sed
similique libero quis earum neque? Provident rem
neque nisi assumenda ducimus itaque, in commodi quas
ea illo unde suscipit iste nam voluptates ipsa illum
distinctio pariatur!
</p>
</div>
</div>
</div>
</div>
</body>
</html>

Lightbox + Text under Image Overlay

How can I add custom text under each image when it's zoomed in? Now it is based on the alt text, but I want to customize it even more with images etc.
The perfect solution would be if the text was displayed in a div.
Here is the codepen:
// Create a lightbox
(function() {
var $lightbox = $("<div class='lightbox'></div>");
var $img = $("<img>");
var $caption = $("<p class='caption'></p>");
// Add image and caption to lightbox
$lightbox
.append($img)
.append($caption);
// Add lighbox to document
$('body').append($lightbox);
$('.lightbox-gallery img').click(function(e) {
e.preventDefault();
// Get image link and description
var src = $(this).attr("src");
var cap = $(this).attr("alt");
// Add data to lighbox
$img.attr('src', src);
$caption.text(cap);
// Show lightbox
$lightbox.fadeIn('fast');
$lightbox.click(function() {
$lightbox.fadeOut('fast');
});
});
}());
body{
background: linear-gradient(to bottom right, #b81d1d, #5F554C, #E4DFD8);
font-family: "Open Sans", sans-serif;
}
.container{
max-width: 800px;
margin: 5% auto;
padding: 20px;
background-color: #fff;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 35px 50px -25px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
}
.text-center{
text-align: center;
margin-bottom: 1em;
}
.lightbox-gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.lightbox-gallery div > img {
max-width: 100%;
display: block;
}
.lightbox-gallery div {
margin: 10px;
flex-basis: 180px;
}
#media only screen and (max-width: 480px) {
.lightbox-gallery {
flex-direction: column;
align-items: center;
}
.lightbox > div {
margin-bottom: 10px;
}
}
/*Lighbox CSS*/
.lightbox{
display: none;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
position: fixed;
top: 0;
left: 0;
z-index: 20;
padding-top: 30px;
box-sizing: border-box;
}
.lightbox img{
display: block;
margin: auto;
}
.lightbox .caption{
margin: 15px auto;
width: 50%;
text-align: center;
font-size: 1em;
line-height: 1.5;
font-weight: 700;
color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2 class="text-center">Lightbox Gallery</h2>
<div class="lightbox-gallery">
<div><img src="http://placehold.it/300/f1b702/fff&text=image1" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, quae, quam. Ut dolorum quia, unde dicta at harum porro officia obcaecati ipsam deserunt fugit dolore delectus quam, maxime nisi quo."></div>
<div><img src="http://placehold.it/300/d2f1b2/222&text=image2" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime accusamus officiis dignissimos doloribus consectetur harum eos sapiente optio aut minima."></div>
<div><img src="http://placehold.it/300/eee/000&text=image3" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates veritatis similique, amet, maiores soluta recusandae cupiditate, sed perspiciatis fugit minima, sunt dolores cum earum deserunt illo ipsum!"></div>
<div><img src="http://placehold.it/300/222/fff&text=image4" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque laudantium dignissimos tenetur eos unde quidem repellat officiis nemo laboriosam necessitatibus deleniti commodi quis aliquid est atque tempora aut, nihil!"></div>
<div><img src="http://placehold.it/300/b47f99/000&text=image5" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto minus consequatur soluta quaerat itaque, laboriosam quis a facilis, cumque, deleniti quas aperiam voluptate dolore. Enim nostrum sit eaque, porro eligendi illo placeat?"></div>
<div><img src="http://placehold.it/300/e1d400/000&text=image6" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi suscipit quam, id aliquam totam aperiam quas rem debitis voluptatem pariatur, illo accusamus facilis eius ipsa! Reprehenderit libero, quas iste repudiandae distinctio, quos dignissimos."></div>
</div>
</div>
Codepen URL: http://codepen.io/lkfmarketing/pen/XMdNEP

You can add a hidden div and grab the text with jQuery.
<div class="js-text text">Test</div>
var txt = $(this).parent().find('.js-text').text()
Forked example

I think for this you could use data attributes:
<div><img id="myImg" src="http://placehold.it/300/f1b702/fff&text=image1" alt="my alt" data-caption="my Caption or whatever you want"></div>
And then you use this in js as follows
var myCaption = $('#myImg').data('caption');
// use this as you please
Regards

Bootstrap 3 Slide in Menu Animation Direction on Mobile

How can I change the default slide in direction of the navigation menu when the toggle icon ("hamburger icon") is pressed?
I would like to achieve an effect similar to the one www.shopify.com is using on mobile version of their website: http://d.pr/v/1iEUF (here is a short video presentation of what I am trying to achieve).
Thank you very much in advance.

Here is the way to build that style
JS
jQuery(function($){
$('.navbar-toggle').click(function(){
$('.navbar-collapse').toggleClass('right');
$('.navbar-toggle').toggleClass('indexcity');
});
});
I already reupdated the demo, the effect that you wanted i already get the way u posted before.
DEMO

Here is your fiddle
https://jsfiddle.net/sesn/t2h1ya1z/
If you spend some more time, the code can be optimized to minimum number of lines.
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="slidemenu">
<a class="close">X</a>
<ul class="nav navbar-nav">
<li class="active">
Menu
</li>
<li>
Menu
</li>
<li>
Menu
</li>
</ul>
</div>
</div>
</div>
<div id="page-content">
<div class="container">
<h1 class="no-margin-top">Left Sidebar menu</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
</p>
</div>
</div>
CSS
body.slide-active {
overflow-x: hidden
}
#page-content {
position: relative;
padding-top: 70px;
left: 0;
}
#page-content.slide-active {
padding-top: 0
}
#slide-nav .navbar-toggle {
cursor: pointer;
position: relative;
line-height: 0;
float: left;
margin: 0;
width: 30px;
height: 40px;
padding: 17px 0 0 0;
border: 0;
background: transparent;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
background: #CC0F0F;
color: #CC0F0F;
}
.navbar-header {
position: relative
}
.navbar.navbar-fixed-top.slide-active {
position: relative
}
#media (max-width: 767px) {
#slide-nav .container {
margin: 0 !important;
padding: 0 !important;
height: 100%;
}
#slide-nav .navbar-header {
margin: 0 auto;
padding: 0 15px;
}
#slide-nav .navbar.slide-active {
position: absolute;
width: 80%;
top: -1px;
z-index: 1000;
}
#slide-nav #slidemenu {
background: #f7f7f7;
left: -100%;
min-width: 0;
position: absolute;
padding-left: 0;
z-index: 2;
top: -8px;
margin: 0;
}
#slide-nav #slidemenu .navbar-nav {
min-width: 0;
width: 100%;
margin: 0;
margin-top: 40px;
}
#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
min-width: 0;
width: 80%;
white-space: normal;
}
#slide-nav {
border-top: 0
}
#slide-nav.navbar-inverse #slidemenu {
background: #333
}
#navbar-height-col {
position: fixed;
top: 0;
height: 100%;
bottom: 0;
background: #f7f7f7;
}
#navbar-height-col.inverse {
background: #333;
z-index: 1;
border: 0;
}
#slide-nav .navbar-form {
width: 100%;
margin: 8px 0;
text-align: center;
overflow: hidden;
/*fast clearfixer*/
}
#slide-nav .navbar-form .form-control {
text-align: center
}
#slide-nav .navbar-form .btn {
width: 100%
}
#slidemenu .close {
color: white;
margin: 10px;
}
}
#media (min-width: 768px) {
#page-content {
left: 0 !important
}
.navbar.navbar-fixed-top.slide-active {
position: fixed
}
.navbar-header {
left: 0 !important
}
}
Js
$(document).ready(function() {
$('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));
$('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));
var slidewidth = '20%';
var navbarneg = '-' + slidewidth;
if ($(window).width() < 767) {
$('#navbar-height-col').css("width", slidewidth);
$('#navbar-height-col').css("left", navbarneg);
$('#slide-nav #slidemenu').css("width", slidewidth);
$('#slide-nav #slidemenu').css("left", navbarneg);
}
$('#slidemenu .close').on('click', function() {
var selected = $('#slidemenu').hasClass('slide-active');
$('#slidemenu, .navbar-toggle, .navbar-header').toggleClass('slide-active');
$('#slidemenu').stop().animate({
left : selected ? navbarneg : '0px'
});
$('.inverse').stop().animate({
left : selected ? navbarneg : '0px'
});
//alert(1);
});
$("#slide-nav").on("click", '.navbar-toggle', function(e) {
// slider is active
var selected = $(this).hasClass('slide-active');
// set slidemenu width
$('#slidemenu').stop().animate({
left : selected ? navbarneg : '0px'
});
// set navbar width
$('#navbar-height-col').stop().animate({
left : selected ? navbarneg : '0px'
});
$(this).toggleClass('slide-active', !selected);
$('#slidemenu').toggleClass('slide-active');
$('.navbar, .navbar-header').toggleClass('slide-active');
});
var selected = '#slidemenu .navbar, .navbar-header';
$(window).on("resize", function() {
if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
$(selected).removeClass('slide-active');
}
});
});