How to change order of div's using JQuery

user_14302707 0
Viewed 56

$(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.

flexbox html jquery
2 Answers

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>

user_76440180

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>

user_73807790
Related