Attempting to create a frequently asked question accordion

HTML & CSS
1 
<div class="wfaq">
	<div class="frasqu">
		<div class="hspan"><h5>What if I change my mind?</h5><span>+</span></div>
		<p>The Benchmark Free Starter Plan was created to let you test out all our key features and tools at no cost.</p>
	</div>
</div>

Question:
Is the semantic design correct or can this be further minimized or some alternative way to write the HTML part.

Objective: I wanted to create one frequently asked question accordion like this one →

image
image938×517 21.2 KB

The CSS:

.hspan {
	display: flex;
	justify-content: space-between;
}
.hspan span {
	font-size: 3rem;
	display: flex;
	align-items: center;
}

The recursive units will be like this one(additional information for understanding)

<div class="wfaq">
	<div class="frasqu"></div>
	<div class="frasqu"></div>
	<div class="frasqu"></div>
	<div class="frasqu"></div>
	<div class="frasqu"></div>
	<div class="frasqu"></div>
</div>
2

Have you thought of using <details> and <summary>?

3 Likes
3

Thanks, but I do not know about them. Let me browse the internet.

4

This codepen (not mine) might help both to explain details… summary and in creating what you’re fter.

2 Likes
5

And all this is happening without writing sinle line of javascript, Right?
Its only down side is that it(summary) doesnt works with the Internet Explorer →

image
image1055×591 23.9 KB

Mozila reference

6

Right.

1 Like
7

If you would have been in my place what would be your decison knowing that it has IE compatibility issue?

8

Given that IE is no longer supported I don’t consider that an issue - although I understand some devs would want/need to provide IE support.

1 Like
9

In practice I have never opened Internet Explorer in the best of my memory, but there may be people who may be using that browser in some part of the world.

1 Like
10

Microsoft is dropping support for IE11 soon and across all its products so it really is not worth supporting it. Indeed encouraging users to use insecure browsers should avoided at all costs as that’s how all the ransomeware viruses get access to your computer.

However, regarding the Details and Summary elements there is no real issue because IE11 will just see them as normal divs so a user will still get the content but not in an accordion structure.

5 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.