Tips on positioning the down arrow of an accordion-button to the left

I need to adjust the placement of the down arrow on an accordion button for my Arabic language website. Here is the current code snippet:

   <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9f9e2e5e2e4f7e6d6a3b8a7b8a6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1313080f080e1d0c49524d524c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
   
   <div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button dir="rtl" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
        السؤال الأول؟
      </button>
    </h2>
    <div dir="rtl" id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">الجواب على سؤالك الأول</div>
    </div>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

To enhance the design of the arrow, apply margin-right:auto to the ::after pseudo-element while eliminating the existing margin-left set by Bootstrap. Refer to the code snippet below for implementation.

.accordion-button::after {
  margin-left:0!important;
  margin-right:auto;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6e6363787f787e6d7c4c39223c223e">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26444949525552544756661308160814">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Code -->
<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button dir="rtl" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        السؤال الأول؟
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">الجواب على سؤالك الأول</div>
    </div>
  </div>
</div>

JSFiddle Link

Answer №2

It has been effective for me as well.

.accordion-button::after {
    position: absolute;
    right: 0.7rem;
  }

Answer №3

Below is the CSS code you can utilize:

.accordion-button {
  justify-content: end !important;
}

.accordion-button::after {
  margin-right: auto;
  margin-left: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f3f24232422312010657e617e60">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d5d8d8c3c4c3c5d6c7f78299869987">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
   
<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button dir="rtl" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
        السؤال الأول؟
      </button>
    </h2>
    <div dir="rtl" id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">الجواب على سؤالك الأول</div>
    </div>
  </div>
</div>

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

Guide to adding a tag in front of a text in HTML with Python

Searching for all the text within the html document and wishing to incorporate a span tag that contains additional information about each text as shown below def recursiveChildren(x): if "childGenerator" in dir(x): for child in x.childGenerator( ...

pythonhtmlbeautifulsoup

I am currently working on a one-page website that will feature both a Careers form and a Contact Us form. However, I am facing a challenge with the submission

I am currently working on integrating Careers FORM and Contact Us FORM into a single page website. However, I am facing an issue with the form Submit Buttons. The problem arises during validation of the input boxes. How can I differentiate between the two ...

htmlforms

creating PHP buttons to update inventory

As a newcomer to AJAX and PHP, I am facing some challenges with an inventory management system built using phpmyadmin and wamp. The registration/login system is functioning well. However, upon user login, a table displaying all inventory items is generated ...

phphtmlmysqlajax

An issue occurred when retrieving the input value during a (change) event within a nested *ngFor loop in Angular

Within my table, I have implemented a nested loop using the *ngFor directive: <tbody> <tr *ngFor="let dept of salesTarget; let i = index"> <td>{{dept.dept}}</td> <td *ngFor="let month of monthList; ...

htmlangular

JavaScript Function Not Executed in Bottom Section

I've implemented AngularJS includes in my project. Below is the code snippet from my index.html: <!DOCTYPE html> <html ng-app=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> ...

javascriptjqueryhtmlcssangularjs

I'm having trouble getting jQuery UI's droppable to function properly. How can I troub

Recently, I created a drag and drop game to enhance my jQuery UI skills. However, I am facing an issue where the circle cannot be dropped on the square with the same color. Also, when it does work, the circle ends up behind the square instead of on top. It ...

javascriptjqueryhtml

Set HTML form elements to be shown in 'display only' mode, without any interactivity

In the process of developing a dynamic form builder, I am allowing users to add various blocks of content like buttons, text inputs, paragraphs of text, and images to a page. They can later publish this as a simple HTML form for their use. When it comes t ...

htmlaccessibilitywai-aria

Ways to prevent continuous database record creation when refreshing the page

My form for adding records to the database looks like this: <form class="col s12" action="" method="post"> <div class="row"> <div class="input-field col s6"> <input placeho ...

phphtmlmysql

Adding an overlay to a material UI table row: Step by step guide

My code is rendering a row in the following format: `<TableRow key={row.name} > <TableCell>{row.empId}</TableCell> <TableCell>{row.userId}</TableCell> <TableCell>{row.name}</TableCell> <TableCell>{r ...

javascriptcssreactjshtml-tablematerial-ui

Extracting text using Python and Selenium

Having trouble extracting text from HTML using Selenium and Python innerHTML <span data-select="" data-selected="Selected" data-deselect="Press enter to remove" class="multiselect__option"><span>ONE</span></span> <!----> ...

pythonhtmlselenium-webdriver

Utilizing C# dynamic variable within inline CSS for an element (MVC)

I'm currently struggling with trying to generate a random color for an element in a cshtml view. No matter what I attempt, it just won't cooperate. When I include the @ symbol, the color property doesn't highlight as expected, leading me to ...

c#htmlcssasp.net-mvc

Tips to properly align text within the same paragraph on both the left and right sides using PrimeVue's InlineMessage

Does anyone know how to align two texts left and right using bootstrap while using the primevue component InlineMessage? <InlineMessage severity="error" class="my-4 block align-items-center">Error Request Percentage <span class ...

bootstrap-5bootstrap-vueprimevue

Display the HTML content retrieved from the SailsJS Controller

Exploring the world of SailsJS, I am on a mission to save HTML content in a database, retrieve it, and display it as rendered HTML. To achieve this goal, I have set up a sails model and a controller. This is what my model looks like: attributes: { ht ...

javascripthtmlnode.jssails.jsejs

What specific features does CSS3 offer in terms of background-size properties?

Let's delve into my knowledge: $, like in font-size: 14$; em, as in margin: 2em; What other units are out there? ...

css

Should I open the Intel XDK hyperlinks in the default web browser instead of

Lately, I've been developing an HTML5 app on the Intel XDK that includes buttons linking to external websites. However, I'm encountering an issue where the apps open in the same window, leading users to get stuck in the browser. Currently, I am u ...

androidjqueryhtmlbrowserintel-xdk

Leverage the power of Angular by configuring a custom webpack setup to

Implementing the CSS modules concept in my Angular app has been a challenge due to conflicts with existing frontend CSS. My project utilizes SCSS, and I am looking for a way for webpack to modularize the CSS generated from SCSS during the final build step. ...

cssangularwebpackwebpack-style-loadercss-loader

Prevent lengthy headers from disrupting the flow of the list items

I've encountered an issue while working on a website that features a list of items. When the title, such as "roller blinds," spans across two lines, it disrupts the layout below. How can I prevent this from happening without compromising on having lon ...

htmlcsshtml-lists

Issue with QuickSand Script not displaying properly on Internet Explorer 7

My website features an edited version of Quicksand that displays correctly on Chrome, Opera, and Firefox, but runs into CSS issues on IE. Oddly enough, when I was using the static version, the CSS displayed properly even on IE until I added the Quicksand e ...

jquerycssquicksand

Utilizing a function argument within the :not() selector

I am currently working towards the objective of selecting all elements in my document except for those within a specific class. This is what I have come up with so far: var x = document.querySelectorAll(":not(.myParameter)"); My aim is to make 'myPa ...

javascripthtml

Guide on stacking two divs on each other in response to a decrease in screen width

In this particular section, there is a div labeled programDescriptionDiv. Inside programDescriptionDiv, there are two separate divs. Normally, these two divs each take up 50% of the screen width. The goal is to have the second div stack below the first on ...

htmlcssflexbox