how to toggle one div at the time

how to toggle one div at the time - javascript

On my portfolio website, I have a full-width column of projects, where Ii wish that upon clicking the title the project display /.content slidetoggles downwards. Upon clicking any other project the former active project slides up and closes, whereas the new project displays. What is thee best way of targetting individual projects on click?
I have tried several things, from assigning a parent to the Title-Line-01, to straight-forward toggle jQuery, to assigning a different code to every single project I've read. through several articles here on Stack Overflow. But I still have not achieved the result I want. In the code below upon clicking any title - every projects displays.
$(document).ready(function(){
$(".content").hide();
$(".Title-line-01").click(function(){
$(this).find('.content').toggle();
});
});
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10,
img {vertical-align: middle;}
#font-face {
font-family: 'lirmaregular';
src: url('lirma-webfont.woff2') format('woff2'),
url('lirma-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Information line in the top */
.Headline{
display: flex;
flex-direction: row;
flex-direction: wrap;
font-family:'Helvetica Neue';
}
.Headline_1{
flex:1;
Align: center;
}
.Headline_2{
flex:1;
text-align: center;
}
.Headline_3{
flex:1;
text-align: center;
}
.Headline_4{
flex:1;
position: center;
text-align: right;
}
/* Project and year */
.Title-line{
display: flex;
flex-direction: row
}
.Title-line-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
.Title-line-02{
flex:1;
}
.Title-line-03{
flex:1;
}
.Title-line-04{
flex:1;
font-family:'lirmaregular';
text-align: right;
font-size: 25px;
}
/* Specific projectnames */
.ProjectName-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.content{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
/* Specific contents */
.content-01{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
.Flexbox_1{
flex:1;
font-family:'Helvetica Neue';
font-size: 20px;
}
.Flexbox_2{
flex:1;
}
.Flexbox_3{
flex:1;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Headline">
<div class="Headline_1">
Carina Thornval
</div>
<div class="Headline_2">
mail#cthornval.com
</div>
<div class="Headline_3">
+4571580488
</div>
<div class="Headline_4">
Curriculum vitae available upon request
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Region H</p>
</class>
<div class="Title-line-02">
</class>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2021</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
School Project <br>
Strategic design proposal
<br> <br>
The Health and innovation unit of the Capital Region of
<br> <br>
<br> <br>
<a href="link"> Click here
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides1">
<img src="Images/01_REG H/Instagram - landscape copy.mov" type="video/mp4" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CIFF</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
School Project
<br>
Strategic design
<br> <br>
We were presented with the challenge of rethinking CIFF´s business model as the organisation was facing mounting challenges,
as they were prohibited from throwing their annual fashion fair at Bella Center, because of the outbreak of the coronavirus.
Therefor we proposed a new format for their trade fair: A digital platform, where brands and buyers can engage online through payingf a monthly subscription.
Moreover brands are invited to rent a physical "stage”/pavillion from where they can livestream content,
through for example throwing events or having a showroom. The content produced will then reciprocally be distributed on the online platform.
The stage is a modular and mobile architectural entity,
which can be placed all over the country and where the interior can be adapted to suit the needs of the brand renting the stage.
<br> <br>
This project was a collaboration with Fie Eleonora Mortensen, Gustavo Garcia og Laura Winter-Poulsen.
<br> <br>
<a href="">
Images and video
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_01 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_02 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_03 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_04 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_05 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_06 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Sofia Bordoni</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Webpage design and development
</p>
<br>
<br>
<a href="">
click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides3">
<img src="Images/03_Sofia Bordoni/SofiaBord.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Lirma Type</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Typedesign
</p>
<br>
<br>
<a href="">
Click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides4">
<img src="Images/04_Lirma/type_new copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Wer Baut Der Stadt</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Wer_baut copy.png" style="width:100%">
</div>
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Poster_Wer_baut.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 4)">❮</a>
<a class="next" onclick="plusSlides(1, 4)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CAFX</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Identity Design for Copenhagen Architecture Festival
<br>
2018
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_red_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_green_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_blue_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_7-kopi.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_8-kopi.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 5)">❮</a>
<a class="next" onclick="plusSlides(1, 5)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Contagious Tales</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Graduation project, editorial design.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_01 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_02 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 6)">❮</a>
<a class="next" onclick="plusSlides(1, 6)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>FOAM X HYDRA</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Design of exhibition cahier in connection to the exhibition FOAM X HYDRA
<p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_01.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_02.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_3.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_04.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_05.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 7)">❮</a>
<a class="next" onclick="plusSlides(1, 7)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Money Publication</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_6 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_1 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_3 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_4 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_5 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 8)">❮</a>
<a class="next" onclick="plusSlides(1, 8)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>What is the newsarticle?</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides10">
<img src="Images/10_Newsarticle/Newsletter_1 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_2 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 9)">❮</a>
<a class="next" onclick="plusSlides(1, 9)">❯</a>
</div>
</div>
</div>
</div>
<script src="Slideshows.js"></script>
<script src="Toggle.js"></script>
</body>
</html>

Would it be a bad idea to set id's for your elements?
Set id's for the class "content" divs, and set onclick event for the class "Project" divs.
Class "content" display is initially set to "none".
Of course, add a little code for the onclick event.
In time: in your code there's a few divs closed with </class>. I fixed that.
/* This code closes the project when you click on it,
cause it tracks the outter div (class "Project")
var iShown = 0;
function Show_Content(iContent) {
if (iShown > 0) {
document.getElementById("content" + iShown).style.display = "none";
}
if (iContent !== iShown) {
document.getElementById("content" + iContent).style.display = "block";
iShown = iContent;
} else {
iShown = 0;
}
}
*/
/*This code only closes a project when you open a different one*/
var iShown = 0;
function Show_Content(iContent) {
if (iShown == 0) {
document.getElementById("content" + iContent).style.display = "block";
} else if (iContent !== iShown) {
document.getElementById("content" + iShown).style.display = "none";
document.getElementById("content" + iContent).style.display = "block";
}
iShown = iContent;
}
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10,
img {vertical-align: middle;}
#font-face {
font-family: 'lirmaregular';
src: url('lirma-webfont.woff2') format('woff2'),
url('lirma-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Information line in the top */
.Headline{
display: flex;
flex-direction: row;
flex-direction: wrap;
font-family:'Helvetica Neue';
}
.Headline_1{
flex:1;
Align: center;
}
.Headline_2{
flex:1;
text-align: center;
}
.Headline_3{
flex:1;
text-align: center;
}
.Headline_4{
flex:1;
position: center;
text-align: right;
}
/* Project and year */
.Title-line{
display: flex;
flex-direction: row
}
.Title-line-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
.Title-line-02{
flex:1;
}
.Title-line-03{
flex:1;
}
.Title-line-04{
flex:1;
font-family:'lirmaregular';
text-align: right;
font-size: 25px;
}
/* Specific projectnames */
.ProjectName-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.content{
display: none;
flex-direction: row;
flex-direction: wrap;
}
/* Specific contents */
.content-01{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
.Flexbox_1{
flex:1;
font-family:'Helvetica Neue';
font-size: 20px;
}
.Flexbox_2{
flex:1;
}
.Flexbox_3{
flex:1;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Headline">
<div class="Headline_1">
Carina Thornval
</div>
<div class="Headline_2">
mail#cthornval.com
</div>
<div class="Headline_3">
+4571580488
</div>
<div class="Headline_4">
Curriculum vitae available upon request
</div>
</div>
<div onclick="Show_Content(1)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Region H</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2021</p>
</div>
</div>
<div id="content1" class="content">
<div class=Flexbox_1>
<p>
School Project <br>
Strategic design proposal
<br> <br>
The Health and innovation unit of the Capital Region of
<br> <br>
<br> <br>
<a href="link"> Click here
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides1">
<img src="Images/01_REG H/Instagram - landscape copy.mov" type="video/mp4" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(2)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CIFF</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content2" class="content">
<div class=Flexbox_1>
<p>
School Project
<br>
Strategic design
<br> <br>
We were presented with the challenge of rethinking CIFF´s business model as the organisation was facing mounting challenges,
as they were prohibited from throwing their annual fashion fair at Bella Center, because of the outbreak of the coronavirus.
Therefor we proposed a new format for their trade fair: A digital platform, where brands and buyers can engage online through payingf a monthly subscription.
Moreover brands are invited to rent a physical "stage”/pavillion from where they can livestream content,
through for example throwing events or having a showroom. The content produced will then reciprocally be distributed on the online platform.
The stage is a modular and mobile architectural entity,
which can be placed all over the country and where the interior can be adapted to suit the needs of the brand renting the stage.
<br> <br>
This project was a collaboration with Fie Eleonora Mortensen, Gustavo Garcia og Laura Winter-Poulsen.
<br> <br>
<a href="">
Images and video
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_01 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_02 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_03 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_04 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_05 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_06 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(3)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Sofia Bordoni</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content3" class="content">
<div class=Flexbox_1>
<p>
Webpage design and development
</p>
<br>
<br>
<a href="">
click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides3">
<img src="Images/03_Sofia Bordoni/SofiaBord.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(4)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Lirma Type</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content4" class="content">
<div class=Flexbox_1>
<p>
Typedesign
</p>
<br>
<br>
<a href="">
Click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides4">
<img src="Images/04_Lirma/type_new copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(5)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Wer Baut Der Stadt</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div id="content5" class="content">
<div class=Flexbox_1>
<p>
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Wer_baut copy.png" style="width:100%">
</div>
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Poster_Wer_baut.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 4)">❮</a>
<a class="next" onclick="plusSlides(1, 4)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(6)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CAFX</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div id="content6" class="content">
<div class=Flexbox_1>
<p>
Identity Design for Copenhagen Architecture Festival
<br>
2018
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_red_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_green_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_blue_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_7-kopi.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_8-kopi.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 5)">❮</a>
<a class="next" onclick="plusSlides(1, 5)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(7)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Contagious Tales</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content7" class="content">
<div class=Flexbox_1>
<p>
Graduation project, editorial design.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_01 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_02 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 6)">❮</a>
<a class="next" onclick="plusSlides(1, 6)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(8)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>FOAM X HYDRA</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content8" class="content">
<div class=Flexbox_1>
<p>
Design of exhibition cahier in connection to the exhibition FOAM X HYDRA
<p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_01.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_02.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_3.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_04.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_05.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 7)">❮</a>
<a class="next" onclick="plusSlides(1, 7)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(9)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Money Publication</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content9" class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_6 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_1 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_3 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_4 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_5 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 8)">❮</a>
<a class="next" onclick="plusSlides(1, 8)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(10)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>What is the newsarticle?</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content10" class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides10">
<img src="Images/10_Newsarticle/Newsletter_1 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_2 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 9)">❮</a>
<a class="next" onclick="plusSlides(1, 9)">❯</a>
</div>
</div>
</div>
</div>
<script src="Slideshows.js"></script>
<script src="Toggle.js"></script>
</body>
</html>

Related

How to display images in the same size - with filled space?

I have specified a maximum width for my pictures. Now I have the problem that the pictures are not the same in height. Is there a way to fill in the missing height with a white area (same size at the top and bottom) so that the maximum height is reached but the image is not distorted?
My code:
<div class="w3-row-padding">
<div class="filterDiv master">
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Master</div>
<img src="Img/5.jpg" alt="House" style="width:99%">
</div>
</div>
</div>
<div class="filterDiv master">
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Master</div>
<img src="Img/6.jpg" alt="House" style="width:99%">
</div>
</div>
</div>
<div class="filterDiv master">
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Master</div>
<img src="Img/7.jpg" alt="House" style="width:99%">
</div>
</div>
</div>
<div class="filterDiv master">
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding">Master</div>
<img src="Img/8.jpg" alt="House" style="width:99%">
</div>
</div>
</div>
</div>
w3school framework used.

img {
height: 200px;
object-fit: cover;
}
hope this works

a good practice is to give for each parent div which are the w3-col divs a background-image and a common class which specifies other needed background properties and the wanted height which is 200px. thereby, the images will not be stretched since the divs are the ones that are specified with the wanted height.
The HTML Code will be:
<div class="w3-row-padding">
<div class="filterDiv master">
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container img-container1 img-container ">
<div class="w3-display-topleft w3-black w3-padding ">Master
</div>
</div>
</div>
</div>
<div class="filterDiv master">
<div class="w3-col l3 m6 w3-margin-bottom img-container2 img-container ">
<div class="w3-display-container">
<div class="w3-display-topleft w3-black w3-padding ">Master</div>
</div>
</div>
</div>
<div class="filterDiv master">
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container img-container3 img-container ">
<div class="w3-display-topleft w3-black w3-padding">Master</div>
</div>
</div>
</div>
<div class="filterDiv master">
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-display-container img-container4 img-container ">
<div class="w3-display-topleft w3-black w3-padding ">Master</div>
</div>
</div>
</div>
</div>
given the following CSS
.img-container {
height: 200px;
background-position: center;
background-size: cover;
}
.img-container1 {
background-image: url("Img/5.jpg");
}
.img-container2 {
background-image: url("Img/6.jpg");
}
.img-container3 {
background-image: url("Img/7.jpg");
}
.img-container4 {
background-image: url("Img/8.jpg");
}

how to float divs when using search filter bootstrap

I have created a gallery that gets filtered two ways. One by click of a button and the other with a search filter. Filters are working perfectly, except when divs are hidden on filter the remaining showing divs do not float next to each other.
this is what it looks like before filtered:
After filtering this is what it looks like:
How can I get it all of dancer2 to be next to each other and only start a new row every 4 dancers?
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".column").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
.column {
float: right;
display: none;
/* Hide columns by default */
}
.content {
background-color: white;
padding: 10px;
text-align: center;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row container" style="margin: auto;">
<div class="col-sm-4">
<input type="text" id="myInput" placeholder="Search for names..">
</div>
<div class="col-sm-8" style="text-align: right;">
<div id="myBtnContainer" class="container" style="padding-bottom: 2rem;">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('teachera')"> teachera</button>
<button class="btn" onclick="filterSelection('teacherb')"> teacherb</button>
<button class="btn" onclick="filterSelection('teacherc')"> teacherc</button>
</div>
</div>
</div>
<!--DANCER GALLERY-->
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer1" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer2" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer3" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer4" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teachera</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer1a" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer2a" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer3a" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer4a" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teacherb</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer1b" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer2b" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer3b" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer4b" style="width:80%; height: 200px;">
<h4 class="dancerName">Dancer4</h4>
<p>teacherc</p>
</div>
</a>
</div>
</div>

When you declare a new div with the "row" class it will start a new row. If you want all of those elements to show side-by-side, they should all be in the same "row" div. The bootstrap styles will automatically keep a maximum of 4 pictures side-by-side and wrap to a new row (because you have col-sm-3 as the class for the individual pictures). Bootstrap rows go up to 12 units long. Each time a new element is added, if it exceeds the 12, it will wrap to the next line.

How to keep user from scrolling to portion of a page until an audio file has played for certain amount of time?

I want to block the user from scrolling past the "[just after]" picture of foggy trees until a certain point in the song is reached.
All the css is just font's and what not. I'd like to stop scrolling right before section SIX.
Here's the html:
<!DOCTYPE html>
<html>
<title>LMC 3255 Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="morefonts.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
}
.bgimg-1 {
background-image: url('images/snowyMountains.jpg');
}
.bgimg-2 {
background-image: url('images/blackbirdEye.jpg');
}
.bgimg-3 {
background-image: url('images/birdsInTree.jpg');
}
.bgimg-4 {
background-image: url('images/birdsOfFire.jpg');
}
.bgimg-5 {
background-image: url('images/areOne.jpg');
}
.bgimg-6 {
background-image: url('images/justAfter.jpg');
}
.bgimg-7 {
background-image: url('images/menOfHaddam.jpg');
}
.bgvid {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
width: 100%;
}
.animatedBG {
animation-name: lightning;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
</style>
<body>
<audio autoplay>
<source src="images/OpenCountryJoy.mp3" type="audio/mp3">
</audio>
<!-- First Parallax Image with Title Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-xlarge w3-black w3-xlarge w3-wide w3-animate-opacity">BLACKBIRD</span>
</div>
</div>
<!-- Container-->
<div class="w3-content w3-container w3-padding-64" id="about">
<h3 class="w3-center">Tucker LoCicero</h3>
<p class="w3-center">
A remediation of<br>
<em>Thirteen Ways of Looking at a Blackbird</em><br>
by Wallace Stevens<br>
</p>
</div>
<!--ONE-->
<div class="bgimg-2 w3-display-container w3-opacity-min" id="stanza1bg">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">ONE</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza1">
<h3 class="w3-center">Among twenty snowy mountains,<br>
The only moving thing<br>
Was the eye of the blackbird.<br>
</h3>
</div>
<!--TWO-->
<div class="bgimg-3 w3-display-container w3-opacity-min" id="stanza2bg">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">TWO</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza2">
<h3 class="w3-center">I was of three minds,<br>
Like a tree<br>
In which there are three blackbirds.<br>
</h3>
</div>
<!--THREE-->
<div class="bgimg-4 w3-display-container w3-opacity-min" id="stanza2bg">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">THREE</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza3">
<h3 class="w3-center">The blackbird whirled in the atumn winds.<br>
It was a small part of the pantomime.<br>
</h3>
</div>
<!--FOUR-->
<div class="bgimg-5 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">FOUR</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza4">
<h3 class="w3-center">A man and a woman<br>
Are one.<br>
A man and a woman and a blackbird<br>
Are one.<br>
</h3>
</div>
<!--FIVE-->
<div class="bgvid w3-display-container w3-opacity-min" id="stanza5bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="bgvid">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">FIVE</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza5">
<h3 class="w3-center">I do not know which to prefer,<br>
The beauty of inflections<br>
Or the beauty of innuendoes,<br>
The blackbird whistling<br>
Or just after.<br>
</h3>
</div>
<div class="bgimg-6 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-wide">[just after]</span>
</div>
</div>
<!--SIX-->
<div class="w3-content w3-container w3-padding-64" id="stanza6">
<h3 class="w3-center">Icicles filled the long window<br>
With barbaric glass.<br>
The shadow of the blackbird<br>
Crossed it, to and fro.<br>
The mood<br>
Traced in the shadow<br>
An indecipherable cause.<br>
</h3>
</div>
<!--SEVEN-->
<div class="bgimg-7 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">SEVEN</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="portfolio">
<h3 class="w3-center">O thin men of Haddam,<br>
Why do you imagine golden birds?<br>
Do you not see how the blackbird<br>
Walks around the feet<br>
Of the women about you?<br>
</h3>
</div>
<!--TEN-->
<div class="bgvid w3-display-container w3-opacity-min" id="stanza10bg">
<video loop autoplay poster="img/videoframe.jpg" class="bgvid">
<source src="images/greenLight.mp4" type="video/mp4">
</video>
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">TEN</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza10">
<h3 class="w3-center">At the sight of blackbirds<br>
Flying in a green light,<br>
Even the bawds of euphony<br>
Would cry out sharply.<br>
</h3>
</div>
<!--THIRTEEN-->
<div class="w3-display-container w3-opacity-min">
<img src="images/eveningAllAfternoon.jpg" style="width: 100%">
<div class="w3-display-middle">
<h3 class="w3-center w3-text-light-grey" style="font-size: 1000%">
T<br>
H<br>
I<br>
R<br>
T<br>
E<br>
E<br>
N<br>
</h3>
</div>
</div>
<div class="w3-content w3-container w3-padding-64">
<h3 class="w3-center">It was evening all afternoon.<br>
It was snowing<br>
And it was going to snow.<br>
The blackbird sat<br>
In the cedar-limbs.
</h3>
</div>
</body>
</html>
See the live website (view on chrome).

Figured it out! I just made my div style="display: none" and used setTimeout() to fadeIn() at the right time.
$(document).ready(function(){
setTimeout(function() {$("#somehiddenDiv").fadeIn();}, 7100);
});

Javascript flipping the div with content

I have a page where there should be 2 rows, each containing two rectangular divs with content (image, h3 and paragraph). When clicking on the div, it has to flip in order to show its back content.
All the work is done with Bootstrap and the script is taken from
https://nnattawat.github.io/flip/.
The matter is simple yet impossible for me: those two rows stay on top of one another. All I need is for them to stay on different rows and be responsive.
This is my HTML:
<div class="container grid-container">
<div class="row">
<div class="card-grid col-md-6">
<div class="front">
<img src="images/1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div class="card-grid col-md-6">
<div class="front">
<img src="images/2.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
<div class="row">
<div class="card-grid col-md-6">
<div class="front">
<img src="images/3.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div class="card-grid col-md-6">
<div class="front">
<img src="images/4.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
</div>
This is my CSS:
.card-grid{
perspective: 500px;
position:relative;
transform-style:preserve-3d;
}
.grid-container>.row>.card-grid>.front{
height:100%;
width:100%;
backface-visibility: hidden;
transform-style: preserve-3d;
position:absolute;
z-index:1;
transition:all 0.5s ease-out;
transform:rotateY(0deg);
}
.grid-container>.row>.card-grid>.back{
transform:rotateY(-180deg);
height:100%;
width:100%;
backface-visibility:hidden;
transform-style:preserve-3d;
position:absolute;
z-index:0;
transition:all 0.5s ease-out;
}
About CSS: I tried to make classes .front and .back less specific, then I tried to override Bootstrap's CSS file by making them more specific. No change.
And my main JS script is this:
$(function(){
$(".card-grid").flip({
trigger:"click"
});
});

I think below code helps you
Fiddle: https://jsfiddle.net/nadimsajib/bhx8fqvm/
HTML:
<div class="grid">
<div class="row">
<div id="card" class="card col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="front">
<img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div style="height:500px;">
</div>
<div class="card col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="front">
<img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
</div>
JS:
$(function($) {
$(".card").flip();
});

On some window width make 4 unlisted list (ul) in to one

I have page on my site with events. Because all 'li' are not in same dimension I put them in four 'ul' and floated them left.
.DogadjajiLista{
width:225px;
margin-right:15px;
position:relative;
text-align:left;
float:left;
}
.DogadjajiLista li{
position:relative;
list-style:none;
width:225px;
display:block;
padding:0;
margin-bottom:15px;
overflow:visible;
float:left;
-moz-box-shadow: 2px 3px 2px #cecece;
-webkit-box-shadow: 2px 3px 2px #cecece;
box-shadow: 2px 3px 2px #cecece;
}
For responsive design I put them in display inline-block.
#media screen and (max-width: 768px) {
.DogadjajiLista{
width:100%;
text-align:center;
}
.DogadjajiLista li{
display:inline-block;
padding:0;
margin:10px 5px;
float:none;
}
}
Put my problem is when I have 3 'li' on smaller screen got to align them 2 'li' in row, then one 'li' in row. And after that secon 'ul' with same behaviour, so it doesent look pretty nice. So i wonder if is there some way in javascript or jquery to make four 'ul' into the one on smaller devices. I hope I explained well my problem.
Here You can se in responsinator.
http://www.responsinator.com/?url=http%3A%2F%2Fwww.anaizadar.com%2Fhr%2Fdogadjanja
Here is html
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj01.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj1_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj1_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>24.10.-27.10.2013.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj05.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj5_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj5_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>29.08.-31.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj09.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj9_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj9_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>29.08.-31.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj02.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj2_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj2_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>12.06.-15.06.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj06.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj6_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj6_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>08.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj10.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj10_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj10_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>30.06-04.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj03.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj3_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj3_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>06.06.-08.06.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj07.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj7_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj7_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>10.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj11.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj11_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj11_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>10.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj04.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj4_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj4_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>29.08.-31.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj08.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj8_naslov?></h2>
<!--<p style="margin:5px 0;"><?=$tekst_dogadjaj8_opis?></p> -->
</div>
<div class="DogadjajiListDownload">
<p>23.08.2014.-29.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>

We Keep Coding

JavaScript is the programming language of the Web.

how to toggle one div at the time - javascript

Related

How to display images in the same size - with filled space?

how to float divs when using search filter bootstrap

How to keep user from scrolling to portion of a page until an audio file has played for certain amount of time?

Javascript flipping the div with content

On some window width make 4 unlisted list (ul) in to one

Categories

Resources