Is there a way to ensure that all my "+" buttons are aligned vertically?

Question

Is there a way to ensure that all my "+" buttons are aligned vertically?

I am currently working on a Frequently Asked Questions section for a project I am developing. My goal is to compile a list of common questions that potential buyers may have. I envision a setup where, upon clicking the + button next to the question, a new paragraph will expand below to provide the answer. One issue I am facing is ensuring that all the + buttons are aligned vertically with each other. Currently, the position of each + button varies based on the length of the question. Although I have implemented justify-content: space-between to add some spacing between the question and the +, it results in a messy look as the + buttons are not uniformly aligned.

section {
  background-color: #fff;
  height: 100vh;
  height: fill-available;
  min-height: -moz-available;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.faq {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container {
  display: flex;
  width: 60vw;
}

.left {
  width: 100%;
}

.get-started {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
}

.question {
  display: flex;
  justify-content: space-between;
}

<section class="faq">
        <div class="container">
          <div class="left">
            <div class="get-started">
              <p>Learn How To Get Started</p>
            </div>
            <div class="question">
              <p>How do I create a website?</p>
              <button>+</button>
              <div>
                <p></p>
              </div>
            </div>
            <div class="question">
              <p>Is this website right for me?</p>
              <button>+</button>
              <div>
                <p></p>
              </div>
            </div>
           <div class="question">
             <p>How much will web storage cost me?</p>
             <button>+</button>
             <div>
               <p></p>
             </div>
           </div>
          </div>
        </div>
      </section>

css

Answer 1

Answer №1

/* A simple demonstration with minimal effort put into aesthetics */

// Getting all elements that match the selector:
const questions = document.querySelectorAll('.question'),
    buttons = document.querySelectorAll('.question button'),
    // Defining the toggle() function using Arrow syntax:
    toggle = (evt) => {
      let {currentTarget} = evt,
          answer = currentTarget.closest('.question').querySelector('div');

      answer.hidden = !answer.hidden;

      currentTarget.textContent = !answer.hidden ? '-' : '+';
      
    }
 
 questions.forEach((q) => q.querySelector('div').hidden = true);

 buttons.forEach(
  (btn) => btn.addEventListener('click', toggle)
 );

/* Rearranged CSS for better readability */
section {
  background-color: #fff;
  height: 100vh;
  height: fill-available;
  min-height: -moz-available;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.faq {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container {
  display: flex;
  width: 60vw;
}

.left {
  width: 100%;
}

.get-started {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
}

.question {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.question button {
  flex-basis: 2rem;
}

.question div {
  flex-basis: 100%;
}

<section class="faq">
  <div class="container">
    <div class="left">
      <div class="get-started">
        <p>Learn How To Get Started</p>
      </div>
     <!-- Question and Answer sections -->
    </div>
  </div>
</section>

Link to JS Fiddle demo.

Suggested improvement:

/* Updated CSS for improved clarity */
section {
  /* Styles for section element */
}
.faq {
  /* Styles for faq element */
}
.container {
  /* Styles for container element */
}
.left {
  /* Styles for left element */
}

/* Additional CSS styles go here */

HTML content goes here...

Another JS Fiddle demo link.

For more information, refer to the following resources:

CSS:
- ::before.
- ::marker.
HTML:
- <details>.
- <summary>.
JavaScript:
- Arrow functions.
- document.querySelectorAll().

Answer 2

/* A simple demonstration with minimal effort put into aesthetics */

// Getting all elements that match the selector:
const questions = document.querySelectorAll('.question'),
    buttons = document.querySelectorAll('.question button'),
    // Defining the toggle() function using Arrow syntax:
    toggle = (evt) => {
      let {currentTarget} = evt,
          answer = currentTarget.closest('.question').querySelector('div');

      answer.hidden = !answer.hidden;

      currentTarget.textContent = !answer.hidden ? '-' : '+';
      
    }
 
 questions.forEach((q) => q.querySelector('div').hidden = true);

 buttons.forEach(
  (btn) => btn.addEventListener('click', toggle)
 );

/* Rearranged CSS for better readability */
section {
  background-color: #fff;
  height: 100vh;
  height: fill-available;
  min-height: -moz-available;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.faq {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container {
  display: flex;
  width: 60vw;
}

.left {
  width: 100%;
}

.get-started {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
}

.question {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.question button {
  flex-basis: 2rem;
}

.question div {
  flex-basis: 100%;
}

<section class="faq">
  <div class="container">
    <div class="left">
      <div class="get-started">
        <p>Learn How To Get Started</p>
      </div>
     <!-- Question and Answer sections -->
    </div>
  </div>
</section>

Link to JS Fiddle demo.

Suggested improvement:

/* Updated CSS for improved clarity */
section {
  /* Styles for section element */
}
.faq {
  /* Styles for faq element */
}
.container {
  /* Styles for container element */
}
.left {
  /* Styles for left element */
}

/* Additional CSS styles go here */

HTML content goes here...

Another JS Fiddle demo link.

For more information, refer to the following resources:

CSS:
- ::before.
- ::marker.
HTML:
- <details>.
- <summary>.
JavaScript:
- Arrow functions.
- document.querySelectorAll().

Answer 3

Answer №2

To align the button to the right using justify-content: space-between;, it is important to only have 2 elements in the container. Otherwise, there will be equal spacing between all elements within that container (as seen after the button in your example). In the code snippet below, I created a div (.label) to encompass the question paragraph and the button, and then applied flexbox to achieve the desired layout.

section {
    background-color: #fff;
    height: 100vh;
    height: fill-available;
    min-height: -moz-available;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

.faq {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container {
    display: flex;
    width: 60vw;
}

.left {
    width: 100%;
}

.get-started {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
}

/* Apply flex styling to the label div */
.label {
    display: flex;
    justify-content: space-between;
}

<section class="faq">
    <div class="container">
        <div class="left">
            <div class="get-started">
                <p>Learn How To Get Started</p>
            </div>
            <div class="question">
                <div class="label">
                    <p>How do I create a website?</p>
                    <button>+</button>
                </div>
                <div>
                    <p></p>
                </div>
            </div>
            <div class="question">
                <div class="label">
                    <p>Is this website right for me?</p>
                    <button>+</button>
                </div>
                <div>
                    <p></p>
                </div>
            </div>
            <div class="question">
                <div class="label">
                    <p>How much will web storage cost me?</p>
                    <button>+</button>
                </div>
                <div>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 4

To align the button to the right using justify-content: space-between;, it is important to only have 2 elements in the container. Otherwise, there will be equal spacing between all elements within that container (as seen after the button in your example). In the code snippet below, I created a div (.label) to encompass the question paragraph and the button, and then applied flexbox to achieve the desired layout.

section {
    background-color: #fff;
    height: 100vh;
    height: fill-available;
    min-height: -moz-available;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

.faq {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container {
    display: flex;
    width: 60vw;
}

.left {
    width: 100%;
}

.get-started {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
}

/* Apply flex styling to the label div */
.label {
    display: flex;
    justify-content: space-between;
}

<section class="faq">
    <div class="container">
        <div class="left">
            <div class="get-started">
                <p>Learn How To Get Started</p>
            </div>
            <div class="question">
                <div class="label">
                    <p>How do I create a website?</p>
                    <button>+</button>
                </div>
                <div>
                    <p></p>
                </div>
            </div>
            <div class="question">
                <div class="label">
                    <p>Is this website right for me?</p>
                    <button>+</button>
                </div>
                <div>
                    <p></p>
                </div>
            </div>
            <div class="question">
                <div class="label">
                    <p>How much will web storage cost me?</p>
                    <button>+</button>
                </div>
                <div>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</section>

Is there a way to ensure that all my "+" buttons are aligned vertically?

Answer №1

Answer №2

Similar questions

Move your cursor over an image within a div container

How can I position a div element inside another fixed div element?

Is it possible to modify the shrinking behavior of Flexbox?

Having trouble with implementing a lightbox form data onto an HTML page using the load() function? Let me help

CSS - Curved background image in the top left corner

Bootstrap 5 dropdown toggle displaying incorrect menu

Move the location of the mouse click to a different spot

Unexpected behavior with Bootstrap classes

Can Angular Flex support multiple sticky columns at once?

Ensuring that hover remains active despite mousedown in JavaScript, CSS, and HTML

Updating JQuery function after window is resized

Adjust the height of a div using jQuery once the AJAX call retrieves the data

Using jQuery to remove all inline styles except for a specific one

What is the best way to generate a tilted slant with text positioned next to it?

Concluding remarks can be found at the end of the article

Disable automatic playback of HTML video

Issue: In Firefox, resizing elements using position:absolute does not work as expected

Disabling the hover effect of a material-ui button within a styled component

Connecting a picture to a web address using the <img class> tag

What steps can I take to prevent Javascript/JQuery from repositioning other elements on the webpage?