Масштабировать несколько делений по клику

Question

Хорошо, поэтому я в основном пытаюсь добиться этого, если вы нажмете div1, ширина этого конкретного div изменится на 50%, а у всех остальных div их ширина изменится, скажем, на 2%. (см. jsfiddle для большей ясности)

Я попытался сделать это, выделив им отдельный класс, поэтому щелчок div - это Online, а остальные - Offline. Я подумал, что это может сработать, если я скажу что-то вроде; если .. имеет класс .. сделайте это.

В конце концов, мне удалось действительно увеличить деление на клик до 50%, но, к сожалению, я немного напортачил. Я включу код, и я надеюсь, что кто-то может объяснить мне, как мне поступить. Я также думал о массиве, но не знал, как двигаться дальше с этим.

https://jsfiddle.net/6cjmshrq/

1

$(".sliding-panel1").click(function(){
  $(".sliding-pane2").addClass("Active");
  $(".sliding-pane2").addClass("Offline");
  $(".sliding-pane3").addClass("Offline");
  $(".sliding-pane4").addClass("Offline");
  $(".sliding-pane5").addClass("Offline");
  $(".sliding-pane6").addClass("Offline");
  $(".sliding-pane7").addClass("Offline");
  $(".sliding-pane8").addClass("Offline");
  $(".sliding-pane9").addClass("Offline");
  $(".sliding-pane10").addClass("Offline");
  $(".sliding-pane11").addClass("Offline");
});

2

$(".sliding-panel1").click(function(){
  if ( $(this).hasClass("Active") ) {
    $(this).animate({
      width: '9%',
      height: '100%'
    });
  } else {
    $(this).animate({
      width: '50%',
      height: '100%'
    });
  }
  $(this).toggleClass("Active");
});

3

$(function(){
    $('.sliding-panel1').click(function(){


             $(".container").children().each( function(){

              if (!$(this).hasClass('Active') ){
                $(this).animate({
                  width: '9%'
              })
              else {
                $(this).animate({
                  width: '50%'
              })                
};

4

var elements = document.getElementsByClassName('Offline');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.widht='2%';
    elements[i].style.height='100%';
}

5

$(".sliding-panel1").click(function(){
      $("#selectedwhip").addClass("active");
    });

    $(function() {
      if ($("#selectedwhip").hasClass("active")) {
        console.log('active');
      }
      else {
        console.log('unactive');
      }
    });

Answer 1

Вы можете минимизировать CSS, который не существует в CSS, просто используйте один класс по умолчанию для состояния по умолчанию и добавьте класс с именем .Active в CSS со свойством transition, и вам не нужно писать столько кода jquery. чтобы контролировать ширину и высоту, вместо этого вы добавляете или удаляете класс .Active, см. демонстрацию ниже, если вы этого хотите

$(".container div").on('click', function(e) {
  var $this = $(this);
  $(".container div").filter(function() {
    return !$(this).is($this);
  }).removeClass('Active').addClass('Offline');
  
  $this.removeClass('Offline').addClass('Active');
});

*,
*:before,
*:after {
  margin: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: grey;
}

.panels {
  width: 9%;
  float: left;
  height: 100vh;
  background-color: red;
  border: 1px black solid;
}

.Active {
  width: 50%;
  transition: 1s linear;
}

.Offline {
  width: 5%;
  transition: 1s linear;
}

<div class="container">
  <div class="panels">1
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
  <div class="panels">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 2

Небольшая корректировка ответа Мухаммеда Омера Аслама на счет сокращения не щелкающих элементов div вместо того, чтобы выталкивать их за пределы экрана (если я вижу это правильно):

Сценарий:

$(".container div").on('click', function() {
    $(".container div").removeClass('Active');
    $(".container div").addClass('Inactive');
    $(this).removeClass('Inactive');
    $(this).addClass('Active');
});

добавить к его CSS:

.Inactive {
  width: 2%;
  transition: 1s linear;
}

Answer 3

Может быть, это:

$("[class^='sliding-panel']" ).click(function(){        //selector part of class name
    $("[class^='sliding-panel']" ).addClass("Offline").removeClass("Active"); //for all  
    $(this).addClass("Active").removeClass("Offline");                         //for this element
});