CSS: Display the index of each ordered list item within a child element

I'm working on creating a unique accordion-style widget similar to the design shown in this image:

https://i.sstatic.net/EBymf.png

My plan is to utilize an ordered list where each <li> element will include a question, answer, and an expand/collapse button.

<li>
    <span class="question">Example question</span>
    <span class="answer">Example answer</span>
    <a class="expand-collapse-button" href="#"></a>
</li>

One challenge I am facing is how to display the index of each list item within its child element without relying on Javascript. In other words, I want the <span class="question"> element to show the respective parent's index like so: 1. Example question.

htmlcss

Answer №1

To implement numbering with CSS, you can utilize CSS Counters.

ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  counter-reset: li-count;
}

li {
  counter-increment: li-count;
}

li .question:before {
  content: counter( li-count) '. ';
  font-weight: bold;
}
<ul>
  <li>
    <span class="question">Example question one.</span>
    <span class="answer">Example answer one.</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
  <li>
    <span class="question">Example question two.</span>
    <span class="answer">Example answer two.</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
</ul>

Answer №2

For more information, feel free to take a look at this link: https://fiddle.jshell.net/RemyaJ/af7tcL0m/

Implement the counter increment in your CSS like this:

body {
    counter-reset: section;
}

label:before {
    counter-increment: section;
    content: counter(section);
}

Answer №3

One challenge lies in formatting the number and aligning the answer paragraph correctly. To simplify, consider eliminating the number from the ordered list and utilizing a counter linked to the counter by applying it to the .question element.

ol {
  counter-reset: qa;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  counter-increment: qa;
  padding: 1em;
}

li .question, li .answer {
  display: block;
}

li .question {
  font-size: 1.4em;
}

li .question:before {
  content: counter(qa)". ";
}
<ol>
  <li>
    <span class="question">Sample question</span>
    <span class="answer">Sample answer</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
  <li>
    <span class="question">Sample question</span>
    <span class="answer">Sample answer</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
  <li>
    <span class="question">Sample question</span>
    <span class="answer">Sample answer</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
  <li>
    <span class="question">Sample question</span>
    <span class="answer">Sample answer</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
</ol>

Answer №4

To enhance the appearance of the .answer element, you can apply some negative margin and set display: block.

hr {
  margin: 15px 0;
  margin-left: -15px;
}
.answer {
  display: block;
  margin-left: -15px;
}
<ol>
  <li>
    <span class="question">Sample question</span>
    <span class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum non adipisci saepe dicta quasi, dolor, facilis provident voluptate eius quod facere et impedit obcaecati enim. Delectus, nihil laudantium magni ad!</span>
    <a class="expand-collapse-button" href="#"></a>
    <hr>
  </li>
  <li>
    <span class="question">Sample question</span>
    <span class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, voluptatum, molestiae. Magnam fuga quibusdam saepe animi dolore aperiam labore iusto, aspernatur esse, distinctio voluptas doloribus quasi rerum! Consectetur, quos quidem.</span>
    <a class="expand-collapse-button" href="#"></a>
    <hr>
  </li>
</ol>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Offset the content from the border within a container that includes a scrollbar

The containing element has some content that is set to have a fixed height and overflow: auto; as shown in the JSFiddle link provided. When scrolling through the text, you will notice that the border comes into contact with the text both above and below. ...

cssscrollpadding

Proper HTML style linking with CSS

Describing the file structure within my project: app html index.html css style.css The problem arises when trying to link style.css as follows: <link rel="stylesheet" type="text/css" href="css/style.css"/> S ...

htmlcss

Incorrect Media Queries breaking LayoutNote: This is a completely unique rewrite

My golden rule for media queries is set... @media only screen and (min-width: 768px) and (max-width: 1080px) { Strangely, I picked 1080 as a test number... Unexpectedly, the background color changes at 1190px when resizing my page to test breakpoints. ...

htmlcssmedia-queries

I'm looking for a button that, when clicked, will first verify the password. If the password is "abcd," it will display another submit button. If not, it

<form action="#" method="post" target="_blank"> <div id = "another sub"> </br> <input type = "password" size = "25px" id="pswd"> </br> </div> <button><a href="tabl ...

javascripthtml

Responsive columns with maximum width in Bootstrap

Currently, I'm working on coding a portion of a single-page responsive Bootstrap layout that features two columns of text placed side by side. The request from the designer is for these columns to have a maximum width, but to be centered until they hi ...

csstwitter-bootstraptext-align

Is the user currently browsing the 'Home screen webpage' or using the Safari browser?

In JavaScript, is there a method to determine if the user has accessed the website from their home screen after adding it to their home screen, or if they are browsing via Safari as usual? ...

javascriptioshtmlmobilesafari

When the user clicks, retrieve the contents of list p and showcase them in a div

Struggling a bit with jQuery, looking for some assistance. I am trying to extract the text within p class="area-desc" when class="caption" is clicked and show it in class="step-area." Here's the code snippet: <ul id="main-areas" class="group"> ...

jqueryhtml

Filtering dynamically generated table rows using Jquery

I'm currently working on a project that involves filtering a dynamic table based on user input in a search bar. The table contains information such as name, surname, phone, and address of users. Using jQuery, I have created a form that dynamically ad ...

javascriptjqueryhtml

If the Ajax request is successful, scroll to the bottom of a Div using jQuery

An interesting scenario arises with this Div that contains user messages, where the newest message always appears at the bottom of the Div and triggers a scroll bar if the message count exceeds the height of the div: <div class="list-group-message" s ...

javascriptjqueryhtmlajaxautoscroll

Retrieve the value of a dynamically generated input element within a form object

I'm trying to figure out how to reference a dynamic 'name' of an input element in a form. Can anyone help? Here's an example using HTML: <form> <input type="text" name="qty1" value="input1" /> <input type="text ...

javascripthtmlforms

The attempt to transfer the image to the newly established file was unsuccessful

Whenever I try to upload an image to a file named 'uploads' within the same directory as my PHP files, I keep encountering an error message indicating an 'Undefined index'. Can someone explain what this error means and provide a solutio ...

phphtml

What is the best approach for implementing a CSS reset across multiple websites with different content?

As I work on a page that will be displayed across numerous websites beyond my control, shown within a jQuery UI dialog window using $.load(), the content is vulnerable to the CSS directives set by each individual site. To prevent conflicts, I have made sur ...

css

Learn the process of transferring product details to a new component in Angular when a product is clicked from the product list component

Currently, my focus is on creating a shopping application using Angular and Django. I managed to get the products from the Django API into the angular products list component. However, I'm looking to enhance the user experience by allowing them to cl ...

htmldjangoangulardjango-rest-framework

Encountering an issue with retrieving the nth element using Python Selenium

<div class="booking-classes"> <h3 style="text-align: center;"> <p><a href="https://foreupsoftware.com/index.php/booking/20290#/teetimes" style="background-position:0px 0px;"><b> ...

pythoncssseleniumweb-scrapingcss-selectors

Unable to modify the bar's color using the .css document

Below is the JavaScript code being used: var marginEducation = {top: 20, right: 30, bottom: 40, left: 300}, widthEducation = 1000, heightEducation = 460; const svgEducation = d3.select("#Education") .append("svg") .attr("w ...

javascripthtmlcssd3.jsgraph

show information from json onto an html page with the help of jquery

I'm looking to showcase buttons from a JSON file within a simple block. Here's the JSON data for movies: { "movies": [ { "title": "Mena", "movieid": "1", ...

javascriptjqueryhtmljson

Incorporating a unique font into your SAPUI5 application

While experimenting with an expense app design, I decided to incorporate a receipt-like font for a unique look and feel. After discovering the FakeReceipt font, I placed my woff and woff2 files in the same directory as my style.css file, and it worked like ...

csssapui5custom-font

Is there a way to eliminate the outline on a FormControl component in React-bootstrap when the input field is selected?

Currently, I'm working on creating a search bar with dropdown suggestions using React-bootstrap. My goal is to have the search bar span across the page from one side to another with margins on the left and right. To achieve this, I am enclosing the in ...

cssreactjsinputbootstrap-5react-bootstrap

Navigation dropdown menu with the latest Bootstrap 4 features

Attempting to recreate the design from Codepen using Bootstrap 4. The current progress can be viewed in this Codepen (drop down with 2 columns), which is assisting with online tutorials. Here's the HTML for the Navbar: <nav class="navbar navbar- ...

jquerycsstwitter-bootstrapbootstrap-4

Is it possible to dynamically add an id or class to an element using document.createElement in JavaScript?

As a beginner in the world of JavaScript, I understand that the code structure I have used here may not be ideal for real-world applications. However, I am using it to practice my understanding of for loops and fetching JSON data. My main query is whether ...

javascripthtml