-1

So, I have a dynamically loading HTML which I cannot change. I have a task to make an accordion view for mobiles. The generated HTML looks like

<div class="vitals-tabs-container"><ul class="tabs"><li data-tab="tab-0" class="tab-link current">Description</li><li data-tab="tab-1" class="tab-link ">tab 2</li><li data-tab="tab-2" class="tab-link ">tab 3</li><li data-tab="tab-4" class="tab-link">Tab 1</li></ul><div id="tab-0" class="tab-content current">
          <p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
<p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
<p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
<p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
</div><div id="tab-1" class="tab-content ">
<p>I love bacon and I like to eat a whole pizza by myself,because, I won't gain weight no matter what.Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
<p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
</div><div id="tab-2" class="tab-content ">
<p>Hello, I don't even know what I should write so I know this is the third tab,lol.Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
<p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>

</div><div id="tab-4" class="tab-content">Ayyyyyyyyyy</div></div>

Basically li for 'headings' with the tabs names and divs for the inner text of each What I tried in CSS doesn't really work, I mean it shows only the tab I want but under all the names, I would like to show the content under it's title not under all 4 names. Here's CSS

.tab-link {
 font-weight: 400;
 font-size: 19px;
 padding: 15px 15px 15px 0px;
  display: flex;
  line-height: 25px;
}

.tab-content {
  display:none;
}

.tab-content.current {
  display:block;
}

here's a picture https://gyazo.com/2361538194f8a587c2352d2dd61b2454

Naman
  • 1,519
  • 18
  • 32
Larica Nuvaluatidecristi Compr
  • 101
  • 1
  • 1
  • 3
  • 1
    What you are trying there is not an accordion but tabs. For an accordion your heading needs to be directly above the div, you should try using google - there are several codepens of pure css accordions – Pete Jun 28 '18 at 08:12
  • 1
    Also not possible to do a pure css accordion with your current html so if you cannot change the structure, you are going to need some js – Pete Jun 28 '18 at 08:20

1 Answers1

-1

sorry my mistake, i forgott you only want to work with pure css

then the solution is eas, check this here: only HTML and pure CSS

https://getbootstrap.com/docs/4.0/components/collapse/

and please scroll down to the accordion example

only thing you need is bootstrap libary!

see here also a good and perfect solution:

https://stackoverflow.com/a/18568997/7036972

hope this helps

WEBGONDEL UG
  • 147
  • 1
  • 2
  • 12