jQuery щелкните по нему, скройте другие div, разверните, чтобы отобразить содержимое в текущем div, щелкните еще раз, чтобы отобразить другие div, и верните его к исходному размеру / положению

Question

Я хотел бы щелкнуть div, чтобы:

1. Разверните его, чтобы отобразить больше содержимого, а
2. Одновременно разместите его в левом верхнем углу,
3. Изменение bg color и
4. Скрытие своих братьев и сестер.

Щелкните div еще раз, чтобы:

1. Переключить его возврат к исходному размеру и цвету, пока
2. Одновременно заставляет братьев и сестер снова появляться в их исходных положениях.

Это поведение будет одинаковым для каждого div.

$('.action').click(function() {
 $('.action').toggle();
 $(this).show()
        .animate({ backgroundColor: '#ff9999', width: '90%' }, 500)
        .children().show()
});

.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 500px;
padding: 30px;
margin-bottom: 40px;
background-color: #bbb;
}
.action {
display: flex;
justify-content: center;
align-items: center;
width: 45%;
height: 50px;
background-color: lightblue;
margin: 10px;
}
.content {
display: none;
padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">  
  <div class="action">
    <p>...action 1</p>
    <div class="content">
      <ol><h3>Content 1</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 2</p>
    <div class="content">
      <ol><h3>Content 2</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 3</p>
    <div class="content">
      <ol><h3>Content 3</h3>
        <li>List item</li>
        <li>List item</li>
     </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 4</p>
    <div class="content">
      <ol><h3>Content 4</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 5</p>
    <div class="content">
      <ol><h3>Content 5</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 6</p>
    <div class="content">
      <ol><h3>Content 6</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">  
  <div class="action">
    <p>...action 1</p>
    <div class="content">
      <ol><h3>Content 1</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 2</p>
    <div class="content">
      <ol><h3>Content 2</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 3</p>
    <div class="content">
      <ol><h3>Content 3</h3>
        <li>List item</li>
        <li>List item</li>
     </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 4</p>
    <div class="content">
      <ol><h3>Content 4</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 5</p>
    <div class="content">
      <ol><h3>Content 5</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
  <div class="action">
    <p>...action 6</p>
    <div class="content">
      <ol><h3>Content 6</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div><!--content-->
  </div><!--action-->
</div> 

Answer 1

Попробуйте это -

$('.action').click(function() {
  if(!$(this).hasAttr('data-w')){
//store the width for re-use
    $(this).prop('data-w',$(this).width());
    $(this).animate({ backgroundColor: '#ff9999', width: '90%' }, 500)
        .children().show();
  }
  else{
    $(this).show()
        .animate({ backgroundColor: '#ff9999', width: $(this).prop('data-w') }, 500)
        .children().show();
    $(this).removeAttr('data-w')
  }
 
});

Answer 2

Сделать это можно так:

$('.action').click(function() {
  let siblings = $(this).siblings();
  if (siblings.length === siblings.filter(':visible').length) {
    siblings.hide();
    $(this).animate({
        backgroundColor: '#ff9999',
        width: '90%'
      }, 500)
      .children('.content').show();
  } else {
    siblings.show();
    $(this).animate({
        backgroundColor: '#add8e6',
        width: '45%'
      }, 500)
      .children('.content').hide();
  }
});

.wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 500px;
  padding: 30px;
  margin-bottom: 40px;
  background-color: #bbb;
}

.action {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45%;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

.content {
  display: none;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">
  <div class="action">
    <p>...action 1</p>
    <div class="content">
      <ol>
        <h3>Content 1</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
  <div class="action">
    <p>...action 2</p>
    <div class="content">
      <ol>
        <h3>Content 2</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
  <div class="action">
    <p>...action 3</p>
    <div class="content">
      <ol>
        <h3>Content 3</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
  <div class="action">
    <p>...action 4</p>
    <div class="content">
      <ol>
        <h3>Content 4</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
  <div class="action">
    <p>...action 5</p>
    <div class="content">
      <ol>
        <h3>Content 5</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
  <div class="action">
    <p>...action 6</p>
    <div class="content">
      <ol>
        <h3>Content 6</h3>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    <!--content-->
  </div>
  <!--action-->
</div>