кнопки для отображения аккордеонного контента в фиксированном формате нижнего колонтитула - PullRequest
Новая
       11

кнопки для отображения аккордеонного контента в фиксированном формате нижнего колонтитула

0 голосов
/ 04 октября 2019

Я хочу создать «кнопки» в нижнем колонтитуле. Эти кнопки при нажатии покажут содержимое в стиле аккордеонного типа. Я создал код, который я считаю идеальным, и он работает, однако, когда я нажимаю на одну, все кнопки перемещаются вверх вместе с содержимым. Я бы хотел, чтобы только один двигался вверх, а остальные оставались запертыми в нижнем колонтитуле. Кроме того, возможно, центрирование в пределах окна (в настоящее время оно придерживается слева)

Любая помощь будет оценена.

Я добавил изображение, чтобы показать, что я хочу: введите изображениеописание тут

А теперь код ниже: 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {
  font-family: "Lato", sans-serif;
  margin: 0;
}

.footer {
   position:fixed;
   bottom:0px;
   margin-left: 0 auto;
   text-align: center;
   width:100%;
}

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 20%;
  padding-left:10px;
  padding-right:10px;

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.accordion {
  padding: 18px;
margin-left: 10px;
margin-right: 10px;
  background-color: #eee;
  cursor: pointer;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  text-align: left;
margin-left: 10px;
margin-right: 10px;
  width: 100%;
  background-color: #eee;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel p {
  padding-left:10px;
  padding-right:10px;
}

</style>
</head>
<body>

<h2>My footer buttons</h2>
<div class="footer">
<div class="row">
  <div class="column">

		<div class="div1">
			<button class="accordion">Button 1</button>
		<div class="panel">
		<p>Button 1 content and information to go here <br><br><a href="">more information</a></p>
		</div>
		</div>

  </div>
  <div class="column">


		<div class="div1">
			<button class="accordion">Button 2</button>
		<div class="panel">
		<p>Button 2 content and information to go here <br><br><a href="">more information</a></p>
		</div>
		</div>

  </div>
  <div class="column">

		<div class="div1">
			<button class="accordion">Button 3</button>
		<div class="panel">
		<p>Button 3 content and information to go here <br><br><a href="">more information</a></p>
		</div>
		</div>

  </div>
  <div class="column">

		<div class="div1">
			<button class="accordion">Button 4</button>
		<div class="panel">
		<p>Button 4 content and information to go here <br><br><a href="">more information</a></p>
		</div>
		</div>

  </div>
</div>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

1 Ответ

1 голос
/ 04 октября 2019

Используйте flexbox на .row и выровняйте по концу 

.row {
    display: flex;
    align-items: flex-end;
    justify-content:center;
}


var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
body {
  font-family: "Lato", sans-serif;
  margin: 0;
}

.footer {
  position: fixed;
  bottom: 0px;
  margin-left: 0 auto;
  text-align: center;
  width: 100%;
}

* {
  box-sizing: border-box;
}


/* Create two equal columns that floats next to each other */

.column {
  float: left;
  width: 20%;
  padding-left: 10px;
  padding-right: 10px;
}

.row {
  display: flex;
  align-items: flex-end;
  justify-content:center;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.accordion {
  padding: 18px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #eee;
  cursor: pointer;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
  background-color: #eee;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel p {
  padding-left: 10px;
  padding-right: 10px;
}
<h2>My footer buttons</h2>
<div class="footer">
  <div class="row">
    <div class="column">

      <div class="div1">
        <button class="accordion">Button 1</button>
        <div class="panel">
          <p>Button 1 content and information to go here <br><br><a href="">more information</a></p>
        </div>
      </div>

    </div>
    <div class="column">


      <div class="div1">
        <button class="accordion">Button 2</button>
        <div class="panel">
          <p>Button 2 content and information to go here <br><br><a href="">more information</a></p>
        </div>
      </div>

    </div>
    <div class="column">

      <div class="div1">
        <button class="accordion">Button 3</button>
        <div class="panel">
          <p>Button 3 content and information to go here <br><br><a href="">more information</a></p>
        </div>
      </div>

    </div>
    <div class="column">

      <div class="div1">
        <button class="accordion">Button 4</button>
        <div class="panel">
          <p>Button 4 content and information to go here <br><br><a href="">more information</a></p>
        </div>
      </div>

    </div>
  </div>
</div>
...