Как создать складной контент с помощью кнопки разделения? (HTML / CSS / JS) - PullRequest
Новая
       0

Как создать складной контент с помощью кнопки разделения? (HTML / CSS / JS)

0 голосов
/ 03 марта 2020

С двумя столбцами (слева указано имя; справа - функция свертывания (кнопка)), как бы вы создали свернутое содержимое в следующей строке с полной шириной (охватывает оба столбца)?

Я могу свернуть только в пределах определенного столбца. Я попытался свернуть строку ниже, создав новый div, но затем действие свертывания больше не работает.

Это должно выглядеть так:

Спасибо за вашу помощь!

JavaScript от: https://www.w3schools.com/howto/howto_js_collapsible.asp

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
:root {
  --colorbggray: rgb(65,65,65);
  --colorlightgray: rgb(150,150,150);
  --colorcyan: rgb(0, 229, 255);
  --colorgreen: rgb(0, 255, 0);
  --colorUpGrey: rgb(135,135,135);
  --colorLowGrey: rgb(38,38,38);
  --colorMidGrey: rgb(95,95,95);
  --colorGreen: rgb(11,69,2);
  --colorAmber: orange;
  --colorRed: red;
}

.verticalmenu-auto {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.verticalmenu-auto > div {
  border-top: 2px solid var(--colorUpGrey);
  border-bottom: 2px solid var(--colorLowGrey);
  border-left: 2px solid var(--colorUpGrey);
  border-right: 2px solid var(--colorLowGrey);
  background: var(--colorMidGrey);  color: white;
  width: 100px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 16px;
  padding-left: 16px;
  margin: 0.5px;
  text-align: left;
  font-size: 16px;
}

.verticalmenu-auto li, {
  border-top: 2px solidauto var(--colorUpGrey);
  border-bottom: 2px solid var(--colorLowGrey);
  border-left: 2px solid var(--colorUpGrey);
  border-right: 2px solid var(--colorLowGrey);
  background: var(--colorMidGrey);
}	

.collapsible {
  background: var(--colorMidGrey);  color: white;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
}

.collapsible:after {
  content: '\1433';
  float: center;
  transform: scale(.7, 1);
}

.active:after {
  content: "\142F";
  transform: scale(1, .7);
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.0s ease-out;
  grid-column-start: -1;
  grid-column-end: 1;
  background-color: gray;
}
<body>

<p>On right side open content which is has the width of both columns combined</p>


<ul style="list-style:none;padding-left:0;">
  <li>
  <div class="verticalmenu-auto">
    <div style="flex-grow: 10">Name</div>
    <div style="flex-grow: 1; text-align: center">
    <button class="collapsible"></button>
    <div class='content'>
    <p> content</p>
  	</div>
    </div>
  </div>
  </li> 
  <li>
  <div class="verticalmenu-auto">
    <div style="flex-grow: 10">Name</div>
    <div style="flex-grow: 1; text-align: center">
    <button class="collapsible"></button>
    <div class='content'>
    <p> content</p>
  	</div>
    </div>
  </div>
  </li>

Ответы [ 2 ]

1 голос
/ 03 марта 2020

Небольшое изменение в вашем JS переключателе, а также размещение содержимого вне родительского div, чтобы оно действовало как block

$(document).ready(function () {
    $('.collapsible').on('click', function(event){
    	event.preventDefault();
    	// create accordion variables
    	var accordion = $(this);
    	var accordionContent = accordion.closest('.verticalmenu-auto').next('.content');
    	
    	// toggle accordion link open class
    	accordion.toggleClass("active");
    	// toggle accordion content
    	accordionContent.slideToggle(250);
      accordionContent.toggleClass("active");
    	
    });
});
:root {
  --colorbggray: rgb(65,65,65);
  --colorlightgray: rgb(150,150,150);
  --colorcyan: rgb(0, 229, 255);
  --colorgreen: rgb(0, 255, 0);
  --colorUpGrey: rgb(135,135,135);
  --colorLowGrey: rgb(38,38,38);
  --colorMidGrey: rgb(95,95,95);
  --colorGreen: rgb(11,69,2);
  --colorAmber: orange;
  --colorRed: red;
}

.verticalmenu-auto {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.verticalmenu-auto > div {
  border-top: 2px solid var(--colorUpGrey);
  border-bottom: 2px solid var(--colorLowGrey);
  border-left: 2px solid var(--colorUpGrey);
  border-right: 2px solid var(--colorLowGrey);
  background: var(--colorMidGrey);  color: white;
  width: 100px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 16px;
  padding-left: 16px;
  margin: 0.5px;
  text-align: left;
  font-size: 16px;
}

.verticalmenu-auto li, {
  border-top: 2px solidauto var(--colorUpGrey);
  border-bottom: 2px solid var(--colorLowGrey);
  border-left: 2px solid var(--colorUpGrey);
  border-right: 2px solid var(--colorLowGrey);
  background: var(--colorMidGrey);
}	

.collapsible {
  background: var(--colorMidGrey);  color: white;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
}

.collapsible:after {
  content: '\1433';
  float: center;
  transform: scale(.7, 1);
}

.collapsible.active:after {
  content: "\142F";
  transform: scale(1, .7);
}

.content {
display: none;
  overflow: hidden;
  transition: max-height 0.0s ease-out;
  grid-column-start: -1;
  grid-column-end: 1;
  background-color: #BFBFBF;
  padding: 10px;
  color: #fff;
}
.content.active {
 height: auto;
 display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<p>On right side open content which is has the width of both columns combined</p>


<ul style="list-style:none;padding-left:0;">
  <li>
  <div class="verticalmenu-auto">
    <div style="flex-grow: 10">Name</div>
    <div style="flex-grow: 1; text-align: center">
    <button class="collapsible"></button>
    </div>
  </div>
  
    <div class='content'>
    <p> content</p>
  	</div>
  </li> 
  <li>
  <div class="verticalmenu-auto">
    <div style="flex-grow: 10">Name</div>
    <div style="flex-grow: 1; text-align: center">
    <button class="collapsible"></button>
    </div>
  </div>
  
    <div class='content'>
    <p> content</p>
  	</div>
  </li>
0 голосов
/ 03 марта 2020

Тебе нужно вот так? 

var buttons = document.querySelectorAll('.toggle');

buttons.forEach(function(el) {
  el.addEventListener('click', function(event) {
    var target = event.target.getAttribute('target');
    
    document.getElementById(target).classList.toggle('expanded');
  });
});
table {
  width: 100%;
}

table td:nth-child(2) {
  width: 100px;
}

.row-detail {
  display: none;
}

.expanded {
  display: block;
}
<table>
  <tr>
    <td>Row 1</td>
    <td><button class="toggle" target="row-detail-1">Toggle 1</button></td>
  </tr>
  <tr id="row-detail-1" class="row-detail">
    <td colspan="2">This detail from row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><button class="toggle" target="row-detail-2">Toggle 2</button></td>
  </tr>
  <tr id="row-detail-2" class="row-detail">
    <td colspan="2">This detail from row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td><button class="toggle" target="row-detail-3">Toggle 3</button></td>
  </tr>
  <tr id="row-detail-3" class="row-detail">
    <td colspan="2">This detail from row 3</td>
  </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...