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>
So, i'm working on Image Gallery with Bootstrap...
Problem is i can't make four images two on top, three under the top ones and on the left corner vertical image. You can see in the image i have four images placed okay but vertical one is under them...
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
<img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
</div>
</div>
What should i try? here is the image
You may imbricate class and elements ;
possible example
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<img src="http://dummyimage.com/300x600" class="col-4">
<div class="row wrap col-8">
<img src="http://dummyimage.com/300x330" class="mb-auto col-6">
<img src="http://dummyimage.com/300x330" class="mb-auto col-6">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
</div>
</div>
</div>
Here is a suggestion
.col {
margin: 5px;
height: 200px;
}
.col-4 {
margin: 5px 0px;
}
.col-4,
.col {
background-image: url(https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img-3.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-8">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<div class="col-4"></div>
</div>
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.
I want to change background of div when i hover my link. How can i achieve this? Currently my code looks like this, but it is not working:
<div class="row">
<div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
<a id="test" href="">
<div id="test1" class="col-xs-2 button-left">
<img class="button-img" src="{{ asset('/img') }}"></img>
</div>
<div class="col-xs-5 button-right">
<h3 style="margin-top: 10px; text-align: center;">#lang('main.data')</h3>
</div>
</a>
</div>
#test:hover ~ #test1 {
display: none;
}
#test:hover>#test1 {
background: red;
}
<div class="row">
<div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
<a id="test" href="">
<div id="test1" class="col-xs-2 button-left">
<img class="button-img" src="{{ asset('/img') }}"></img>
</div>
<div class="col-xs-5 button-right">
<h3 style="margin-top: 10px; text-align: center;">#lang('main.data')</h3>
</div>
</a>
</div>
</div>
I have got a bootstrap grid with dynamically generated images.
If the last element is alone in the row it should be centered.
And if there are two elements in row, the second element should float right.
This is what I want:
Two elements in row:
A B D
E F G
H I
One element in row:
A B D
E F G
H
HTML Code:
<div class="row">
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
</div>
This is what I get:
Two elements in row:
A B D
E F G
H I
One element in row:
A B D
E F G
H
I tried it with :last-child:nth-child(odd) and :last-child:nth-child(even), but in the first row the first element is odd, in the second row the first element is even, in the third row the first element is odd again and so on.
Notice that the content size variates.
You can use a mixture of nth-child and last-child:
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col-md-6 {
width: 33.3333%;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
}
.col-md-6:last-child:nth-child(3n+2) {
/* push second child to right if last child */
margin-left: auto;
border-color: red;
}
.col-md-6:last-child:nth-child(3n+1) {
/* push first child to middle if last child */
margin: auto;
border-color: red;
}
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
<div class="col-md-6">
3
</div>
<div class="col-md-6">
4
</div>
<div class="col-md-6">
5
</div>
<div class="col-md-6">
6
</div>
<div class="col-md-6">
7
</div>
<div class="col-md-6">
8
</div>
</div><br>
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
<div class="col-md-6">
3
</div>
<div class="col-md-6">
4
</div>
<div class="col-md-6">
5
</div>
<div class="col-md-6">
6
</div>
<div class="col-md-6">
7
</div>
</div>
If you need this to work with bootstrap 3, rather than 4, then you can just use
.col-md-4:last-child:nth-child(3n+2),
.col-md-4:last-child:nth-child(3n+1){
/* push second child to right if last child */
margin-left: 33.333333%;
border: 1px solid red;
}
Example bootply
You can do it using flex.
var numberOfFlexItmes = $('.flex').children('div').length;
if((numberOfFlexItmes%2) == 0){
$('.flex').css('justify-content','space-between');
}
else{
$('.flex').css('justify-content','space-around');
}
.flex{
width: 300px;
flex:1;
display: flex;
flex-wrap: wrap;
}
.flex-item{
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='flex'>
<div class='flex-item'>
A
</div>
<div class='flex-item'>
B
</div>
<div class='flex-item'>
C
</div>
<div class='flex-item'>
D
</div>
<div class='flex-item'>
E
</div>
<div class='flex-item'>
F
</div>
<div class='flex-item'>
G
</div>
<div class='flex-item'>
H
</div>
</div>
What you can do, is work out if it's got a remaining 2 or 1 when dynamically generating it and use the col-x-push-x to push it that many columns
Fiddle with two Remaining Image
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4 col-md-push-4">
<img src="https://via.placeholder.com/50x50" />
</div>
</div>
</div>
Fiddle with One Remaining Image
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4 col-md-push-4">
<img src="https://via.placeholder.com/50x50" />
</div>
</div>
</div>
You could approach the layout you want using flexbox.
Add justify-content: center to the row. This will center an item if it is in a row by itself.
Also target the second last item in a row. Set margin-right to auto. In a row with only two items, this will align the last item to the right.
Example:
body {
margin: 0;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
width: 33.3333%;
}
.col:nth-last-child(2) {
margin-right: auto;
}
img {
width: 100%;
height: auto;
display: block;
}
<div class="row">
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
</div>
<br><br>
<div class="row">
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
</div>