How to change order of div's using JQuery - html

Question

$(document).ready(function() {
$('.btn_activite').click(function() {
$('#activite').addClass('active');
$('#gestion').removeClass('active');
$('#creation').removeClass('active');
$('#contenu').removeClass('active');
$('#quotidien').removeClass('active');
$('#temps').removeClass('active');
});
$('.btn_gestion').click(function() {
$('#activite').removeClass('active');
$('#gestion').addClass('active');
$('#creation').removeClass('active');
$('#contenu').removeClass('active');
$('#quotidien').removeClass('active');
$('#temps').removeClass('active');
});
$('.btn_creation').click(function() {
$('#activite').removeClass('active');
$('#gestion').removeClass('active');
$('#creation').addClass('active');
$('#contenu').removeClass('active');
$('#quotidien').removeClass('active');
$('#temps').removeClass('active');
});
$('.btn_contenu').click(function() {
$('#activite').removeClass('active');
$('#gestion').removeClass('active');
$('#creation').removeClass('active');
$('#contenu').addClass('active');
$('#quotidien').removeClass('active');
$('#temps').removeClass('active');
});
$('.btn_quotidien').click(function() {
$('#activite').removeClass('active');
$('#gestion').removeClass('active');
$('#creation').removeClass('active');
$('#contenu').removeClass('active');
$('#quotidien').addClass('active');
$('#temps').removeClass('active');
});
$('.btn_temps').click(function() {
$('#activite').removeClass('active');
$('#gestion').removeClass('active');
$('#creation').removeClass('active');
$('#contenu').removeClass('active');
$('#quotidien').removeClass('active');
$('#temps').addClass('active');
});
});
#charset "UTF-8";
#import url("../webfonts/GothamBook/stylesheet.css");
body {
font-family: GothamBook;
color: #FEFEFE;
}
.flex-container {
DISPLAY: FLEX;
justify-content: space-between;
width: 100%;
color: #FFFFFF;
}
.item {
background-color: black;
width: 5%;
margin: 2px;
}
.item-activite {
background-color: black;
width: 15%;
margin: 2px;
text-align: center;
}
.item-gestion {
background-color: #4D4D4D;
width: 15%;
margin: 2px;
text-align: center;
}
.item-creation {
background-color: #40A9F5;
width: 15%;
margin: 2px;
text-align: center;
}
.item-cont {
background-color: #362984;
width: 15%;
margin: 2px;
text-align: center;
}
.item-quot {
background-color: #662D91;
width: 15%;
margin: 2px;
text-align: center;
}
.item-temps {
background-color: #42A246;
width: 15%;
margin: 2px;
text-align: center;
}
.font-black {
color: #000000;
}
.font-grn {
color: #42A246;
}
.container {
display: flex;
justify-content: center;
align-content: center;
}
#activite, #gestion, #creation, #contenu, #quotidien, #temps {
display: none;
}
#activite.active ,#gestion.active , #creation.active ,#contenu.active ,#quotidien.active , #temps.active{
display: block;
}
a {
text-decoration: none;
color: #FFFFFF;
}
.btn_activite, .btn_gestion, .btn_creation, .btn_contenu, .btn_quotidien, .btn_temps {
transition: .2s ease;
-webkit-transition: .2s ease;
cursor: pointer;
}
.btn_activite:hover, .btn_gestion:hover, .btn_creation:hover , .btn_contenu:hover, .btn_quotidien:hover, .btn_temps:hover{
transform: scale(1.1);
-webkit-transform: scale(1.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Menu ACCES CBR -->
<div class="flex-container">
<div class="item">
</div>
<div class="item-activite">
<a class="btn_activite" href="#" >
Activité Assurance Q+
</a>
</div>
<div class="item-gestion">
<a href="#" class="btn_gestion">
Gestion Assurance Q+
</a>
</div>
<div class="item-creation">
<a class="btn_creation" href="#" >
Recherche - création
</a>
</div>
<div class="item-cont">
<a href="#" class="btn_contenu">
Recherche - Contenu
</a>
</div>
<div class="item-quot">
<a class="btn_quotidien" href="#">
Quotidien | Hebdo +
</a>
</div>
<div class="item-temps">
<a href="#" class="btn_temps">
Temps | Chrono
</a>
</div>
<div class="item">
</div>
</div>
<!-- Page Activite -->
<div class="container active" id="activite">
<h1>
Activité Assurance Q+
</h1>
</div>
<div class="container" id="gestion">
<h1>
Gestion Assurance Q+
</h1>
</div>
<!-- Page Recherche creation -->
<div class="container" id="creation">
<h1>
Recherche Creation
</h1>
</div>
<!-- Page Aventuriers -->
<div class="container" id="contenu">
<h1>
Recherche Contenu
</h1>
</div>
<!-- Page Équipiers -->
<div class="container" id="quotidien">
<h1>
Quotidien | Hebdo +
</h1>
</div>
<!-- Page Supporters -->
<div class="container" id="temps">
<h1>
Temps | Chrono
</h1>
</div>
This is a top menu with 6 elements each having 15% width. Ignore the div class="item" elements as they just fill the other 10% on each side of the menu.
What I want is to change the order of the 6 classes, so when I click on btn_creation, for example, this menu moves to position 2 (position 1 and 8 are fillers - class "item", I just use positions 2 to 7).
Hope it's clear?
Basically anything I click goes to position 2, moving the rest to the right.
p.s code not working properly in here, but in my computer it works... sorry first time I do this here.

Answer 1

I believe the runnable example below is what is trying to be achieved?
The only change is in the jQuery handling. All the current handling is commented-out, replaced by the short code snippet at the end of the document.ready function. See the comments there.
$(document).ready(function() {
/*
$('.btn_activite').click(function() {
$('#activite').addClass('active');
$('#gestion').removeClass('active');
$('#creation').removeClass('active');
$('#contenu').removeClass('active');
$('#quotidien').removeClass('active');
$('#temps').removeClass('active');
});
$('.btn_gestion').click(function() {
$('#activite').removeClass('active');
$('#gestion').addClass('active');
$('#creation').removeClass('active');
$('#contenu').removeClass('active');
$('#quotidien').removeClass('active');
$('#temps').removeClass('active');
});
$('.btn_creation').click(function() {
$('#activite').removeClass('active');
$('#gestion').removeClass('active');
$('#creation').addClass('active');
$('#contenu').removeClass('active');
$('#quotidien').removeClass('active');
$('#temps').removeClass('active');
});
$('.btn_contenu').click(function() {
$('#activite').removeClass('active');
$('#gestion').removeClass('active');
$('#creation').removeClass('active');
$('#contenu').addClass('active');
$('#quotidien').removeClass('active');
$('#temps').removeClass('active');
});
$('.btn_quotidien').click(function() {
$('#activite').removeClass('active');
$('#gestion').removeClass('active');
$('#creation').removeClass('active');
$('#contenu').removeClass('active');
$('#quotidien').addClass('active');
$('#temps').removeClass('active');
});
$('.btn_temps').click(function() {
$('#activite').removeClass('active');
$('#gestion').removeClass('active');
$('#creation').removeClass('active');
$('#contenu').removeClass('active');
$('#quotidien').removeClass('active');
$('#temps').addClass('active');
});
*/
// For any <a> tag class that starts with btn_
$('a[class^="btn_"]').click(function() {
// Get the parent div and move it after the
// first div. (with the item class)
$(this).parent().insertAfter($('.item')[0]);
});
});
#charset "UTF-8";
#import url("../webfonts/GothamBook/stylesheet.css");
body {
font-family: GothamBook;
color: #FEFEFE;
}
.flex-container {
DISPLAY: FLEX;
justify-content: space-between;
width: 100%;
color: #FFFFFF;
}
.item {
background-color: black;
width: 5%;
margin: 2px;
}
.item-activite {
background-color: black;
width: 15%;
margin: 2px;
text-align: center;
}
.item-gestion {
background-color: #4D4D4D;
width: 15%;
margin: 2px;
text-align: center;
}
.item-creation {
background-color: #40A9F5;
width: 15%;
margin: 2px;
text-align: center;
}
.item-cont {
background-color: #362984;
width: 15%;
margin: 2px;
text-align: center;
}
.item-quot {
background-color: #662D91;
width: 15%;
margin: 2px;
text-align: center;
}
.item-temps {
background-color: #42A246;
width: 15%;
margin: 2px;
text-align: center;
}
.font-black {
color: #000000;
}
.font-grn {
color: #42A246;
}
.container {
display: flex;
justify-content: center;
align-content: center;
}
#activite, #gestion, #creation, #contenu, #quotidien, #temps {
display: none;
}
#activite.active ,#gestion.active , #creation.active ,#contenu.active ,#quotidien.active , #temps.active{
display: block;
}
a {
text-decoration: none;
color: #FFFFFF;
}
.btn_activite, .btn_gestion, .btn_creation, .btn_contenu, .btn_quotidien, .btn_temps {
transition: .2s ease;
-webkit-transition: .2s ease;
cursor: pointer;
}
.btn_activite:hover, .btn_gestion:hover, .btn_creation:hover , .btn_contenu:hover, .btn_quotidien:hover, .btn_temps:hover{
transform: scale(1.1);
-webkit-transform: scale(1.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Menu ACCES CBR -->
<div class="flex-container">
<div class="item">
</div>
<div class="item-activite">
<a class="btn_activite" href="#" >
Activité Assurance Q+
</a>
</div>
<div class="item-gestion">
<a href="#" class="btn_gestion">
Gestion Assurance Q+
</a>
</div>
<div class="item-creation">
<a class="btn_creation" href="#" >
Recherche - création
</a>
</div>
<div class="item-cont">
<a href="#" class="btn_contenu">
Recherche - Contenu
</a>
</div>
<div class="item-quot">
<a class="btn_quotidien" href="#">
Quotidien | Hebdo +
</a>
</div>
<div class="item-temps">
<a href="#" class="btn_temps">
Temps | Chrono
</a>
</div>
<div class="item">
</div>
</div>
<!-- Page Activite -->
<div class="container active" id="activite">
<h1>
Activité Assurance Q+
</h1>
</div>
<div class="container" id="gestion">
<h1>
Gestion Assurance Q+
</h1>
</div>
<!-- Page Recherche creation -->
<div class="container" id="creation">
<h1>
Recherche Creation
</h1>
</div>
<!-- Page Aventuriers -->
<div class="container" id="contenu">
<h1>
Recherche Contenu
</h1>
</div>
<!-- Page Équipiers -->
<div class="container" id="quotidien">
<h1>
Quotidien | Hebdo +
</h1>
</div>
<!-- Page Supporters -->
<div class="container" id="temps">
<h1>
Temps | Chrono
</h1>
</div>

Answer 2

I suggest you to modify the name of id, that simplify all the code and use insertafter(): (here i have just add x_ in front of id names..
$(document).ready(function() {
var selector = $('a[class^=btn_]');
selector.on('click', function() {
let clasn = $(this).attr('class').split('_')[1];
$('div[id^=x_]').removeClass('active');
$('#x_' + clasn).addClass('active');
var move = $(this).closest('div');
move.insertAfter($('.item').first());
});
});
#charset "UTF-8";
#import url("../webfonts/GothamBook/stylesheet.css");
body {
font-family: GothamBook;
color: #FEFEFE;
}
.flex-container {
DISPLAY: FLEX;
justify-content: space-between;
width: 100%;
color: #FFFFFF;
}
.item {
background-color: black;
width: 5%;
margin: 2px;
}
.item-activite {
background-color: black;
width: 15%;
margin: 2px;
text-align: center;
}
.item-gestion {
background-color: #4D4D4D;
width: 15%;
margin: 2px;
text-align: center;
}
.item-creation {
background-color: #40A9F5;
width: 15%;
margin: 2px;
text-align: center;
}
.item-cont {
background-color: #362984;
width: 15%;
margin: 2px;
text-align: center;
}
.item-quot {
background-color: #662D91;
width: 15%;
margin: 2px;
text-align: center;
}
.item-temps {
background-color: #42A246;
width: 15%;
margin: 2px;
text-align: center;
}
.font-black {
color: #000000;
}
.font-grn {
color: #42A246;
}
.container {
display: flex;
justify-content: center;
align-content: center;
}
#x_activite,
#x_gestion,
#x_creation,
#x_contenu,
#x_quotidien,
#x_temps {
display: none;
}
#x_activite.active,
#x_gestion.active,
#x_creation.active,
#x_contenu.active,
#x_quotidien.active,
#x_temps.active {
display: block;
}
a {
text-decoration: none;
color: #FFFFFF;
}
.btn_activite,
.btn_gestion,
.btn_creation,
.btn_contenu,
.btn_quotidien,
.btn_temps {
transition: .2s ease;
-webkit-transition: .2s ease;
cursor: pointer;
}
.btn_activite:hover,
.btn_gestion:hover,
.btn_creation:hover,
.btn_contenu:hover,
.btn_quotidien:hover,
.btn_temps:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Menu ACCES CBR -->
<div class="flex-container">
<div class="item">
</div>
<div class="item-activite">
<a class="btn_activite" href="#">
Activité Assurance Q+
</a>
</div>
<div class="item-gestion">
<a href="#" class="btn_gestion">
Gestion Assurance Q+
</a>
</div>
<div class="item-creation">
<a class="btn_creation" href="#">
Recherche - création
</a>
</div>
<div class="item-cont">
<a href="#" class="btn_contenu">
Recherche - Contenu
</a>
</div>
<div class="item-quot">
<a class="btn_quotidien" href="#">
Quotidien | Hebdo +
</a>
</div>
<div class="item-temps">
<a href="#" class="btn_temps">
Temps | Chrono
</a>
</div>
<div class="item">
</div>
</div>
<!-- Page Activite -->
<div class="container active" id="x_activite">
<h1>
Activité Assurance Q+
</h1>
</div>
<div class="container" id="x_gestion">
<h1>
Gestion Assurance Q+
</h1>
</div>
<!-- Page Recherche creation -->
<div class="container" id="x_creation">
<h1>
Recherche Creation
</h1>
</div>
<!-- Page Aventuriers -->
<div class="container" id="x_contenu">
<h1>
Recherche Contenu
</h1>
</div>
<!-- Page Équipiers -->
<div class="container" id="x_quotidien">
<h1>
Quotidien | Hebdo +
</h1>
</div>
<!-- Page Supporters -->
<div class="container" id="x_temps">
<h1>
Temps | Chrono
</h1>
</div>