Как оформить аккордеонные кнопки в ряд так, чтобы текст все открывался в один и тот же элемент - PullRequest
Новая
       6

Как оформить аккордеонные кнопки в ряд так, чтобы текст все открывался в один и тот же элемент

0 голосов
/ 17 января 2019

У меня есть куча разных аккордеонов, которые при нажатии расширяются и отображают текст под ними. Это работает нормально, но не совсем то, что я хочу. Я пытаюсь, чтобы кнопки аккордеона были в ряд, и при нажатии они расширялись в область ниже. Как: 

 _   _   _   _
|_| |_| |_| |_|  (unclicked)
 _   _   _   _
|x|_|_|_|_|_|_|  (clicked)
| text of     |  
| accordion   |
|_____________|

(извините, статья ASCII)

Сейчас то, что они делают, больше похоже на это: 

 _  
|x|___________   (clicked)
| text of     |  
| accordion   |
|_____________|
|_| |_| |_|      <-- other accordion buttons

Я не могу понять, как я могу сделать это так, как я ищу. Я возился с разными способами создания аккордеонов (например, расширяемые столы), но я в растерянности. Я нигде не мог найти пример этого стиля аккордеона, возможно ли это сделать, используя, по крайней мере, в основном код, который у меня есть сейчас?

Вот Скрипка, где я сейчас нахожусь: https://jsfiddle.net/zeuyhtpw/3/

:: редактировать включенный код:

HTML: 

<button class="accordion">Button 1</button>
<div class="story">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscingelit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<button class="accordion">Button 2</button>
<div class="story">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<button class="accordion">Button 3</button>
<div class="story">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<button class="accordion">Button 4</button>
<div class="story">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS: 

.story {
  display: none;
}

.accordion {
  background-color: black;
  color: white;
  padding: 5px;
}

JS: 

var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    story = this.nextElementSibling;

    if (story.style.display === "block") {
      story.style.display = "none";
    } else {
      story.style.display = "block";
    }
  });
}

1 Ответ

0 голосов
/ 17 января 2019

Я немного подправил твой пример https://jsfiddle.net/7szxorcq/17/

HTML 

<button class="accordion">Button 1</button>
<button class="accordion">Button 2</button>
<button class="accordion">Button 3</button>
<button class="accordion">Button 4</button>
<div class="story">
  <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscingelit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="story">
  <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="story">
  <p>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="story">
  <p>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Javascript 

const acc = document.getElementsByClassName("accordion");
const stories = document.getElementsByClassName("story");

for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", () => {

    // Show the story we clicked on
    for (let j = 0; j < stories.length; j++) {
        stories[j].style.display = i === j
        ? 'block'
        : 'none';
    }

  });
}
...