Is there a way to incorporate a card logo group into my accordion display?

I am exploring options to include a card logo group alongside my accordion view. My goal is to showcase a card group featuring Visa, MasterCard, and AMEX using SVG. I initially attempted to display 3 images in a row, but I believe there might be a better approach to achieve this.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="screenPayment">
  <div class="payment">
    <div class="payment-tab">
      <div class="payment-radioGroup">
        <input id="paypal" name="cardType" type="radio" value="paypal">
        <label for="paypal">PayPal</label>
      </div>
      <p>You will be redirected to PayPal to complete your purchase securely.</p>
    </div>
    <div class="payment-tab payment-tab-isActive">
      <div class="payment-radioGroup">
        <input checked="" type="radio" name="cardType" id="creditCart" value="creditCard">
        <label for="creditCart">Add credit card</label>
      </div>
      <img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/visa.svg">
      <img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/mastercard.svg">
      <img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/amex.svg">
      <div class="textInputGroup">
        <label for="nameOnCard">Name on card</label>
        <input id="nameOnCard" name="nameOnCard" required="" type="text">
      </div>
      <div class="textInputGroup">
        <label for="cardNumber">Card number</label>
        <input id="cardNumber" name="cardNumber" placeholder="1234 - 5678 - 9876 - 5432" required="" type="text">
      </div>
      <div class="textInputGroup textInputGroup-halfWidth">
        <label for="expirationDate">Expiration Date</label>
        <input id="expirationDate" name="expirationDate" placeholder="MM / YY" required="" type="text">
      </div>
      <div class="textInputGroup textInputGroup-halfWidthRight">
        <label for="cvc">CVC</label>
        <input id="cvc" name="cvc" placeholder="XXX" required="" type="text">
      </div>
    </div>
  </div>
</div>

I am envisioning incorporating this specific card group design within my accordion https://i.sstatic.net/fduoB.png

htmlcsstwitter-bootstrap

Answer №1

The feature to consolidate credit cards within the 'Add credit card' section is now accessible. I regret that your inquiry is somewhat unclear, making it challenging for me to fully comprehend. Additionally, can you direct me to the location of the accordion? - Abhishek Pandey

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeW... 

<p>Regarding the latest update, I have created a new div structure to manage credit card details with specific CSS attributes such as position: absolute, right: 0, top: 16px. The previous settings for credit cards like position, right, and top have been eliminated. Please evaluate the functionality using this revised code snippet.</p>
    </div></answer1>
<exanswer1><div class="answer accepted" i="59640032" l="4.0" c="1578451477" m="1578464157" v="1" a="aHQxMw==" ai="5363605">
<p>You can now add credit cards within the same div labeled 'Add credit card'. I apologize for the lack of clarity in your question. It's difficult for me to interpret accurately. Also, could you specify the location of the accordion? - Abhishek Pandey</p>

<p><div>
<div>
<pre><code><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9Mu...

<p><strong><em>Please test the updated snippet below:</em></strong>
<div>
<div>
<pre><code><script async src="//jsfiddle.net/g9byLcew/embed/"></script>

I have implemented a new div structure for handling credit card information. This div has been styled with position: absolute, right: 0, top: 16px. Previous CSS properties related to credit cards have been removed. Kindly retest the snippet with these modifications.

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

Obtain the content from a dynamically generated dropdown menu and incorporate it into a separate file

My website features two dropdown menus - one for selecting countries and another for cities. The country menu is populated with data from a database, and once a country is selected, the city dropdown is dynamically filled with corresponding cities using a ...

phpjqueryhtmlajax

Buttons for concealment and revelation are unresponsive

I have the following code snippet for uploading an image, which is taken from a template utilizing bootstrap 2. <div class="span6"> <div class="control-group"> <label class="control-label">Imagen</label> <div cla ...

javascriptjqueryhtmltwitter-bootstrap

What could be causing the bootstrap 4 col-md-3 block to shrink when using position fixed?

When working with Bootstrap 4, I encountered an issue where changing the block position from relative to fixed using a script caused the block to decrease in size. The script I used includes a .sticky class: .sticky { position: fixed !important; top: ...

javascripthtmlcssbootstrap-4

What is the best way to change the active class using jquery?

Excuse me, can I get some help? I'm still learning html and jquery, and I've seen this question asked before, but none of the solutions seem to work for me. I'm trying to change the active class in my navbar when I click on another link. Wh ...

jqueryhtmlbootstrap-4

Tips for activating hover effect on child components by hovering over the parent container?

At the moment, I am tackling an issue with CSS in a nextJS web application. The problem lies in a parent div element that contains multiple child elements. My goal is for hovering over the parent div to trigger changes on the child elements as well. Here& ...

csswebnext.jshover

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Edit I have recently discovered a solution to the unusual problem I was facing with the material-ui Chip Component. By adding the line -webkit-appearance: none; to the root div for the Chip, the issue seems to resolve itself. However, this line is being a ...

javascriptcssreactjsmaterial-ui

CSS not affecting DIV height properly

Alright, so I'm facing a little issue with a div that's nested within a form. The form has been set to a minimum height of 100%, however, the child div doesn't seem to stretch even after adjusting the height or min-height properties to 100%. ...

csshtml

Issue: Unable to locate a change supporting element '[object Object]' of the type 'object - Angular 7'

An angular service has been created for the specified purpose: CheckTicket(barcode, codEspec, diaHoraEspec):Observable<Ticket[]>{ //read ticket return this.http.get<Ticket[]>(`${this.checkticket_url}${barcode}?token=${this.token}&a ...

htmlangulartypescriptservice

What is the best way to show JavaScript output with span style?

I have added a translation feature that allows users to switch paragraphs to French when clicked. Each paragraph now has the first word wrapped in a span with a CSS class that enlarges and colors the text. However, I am facing an issue where when switchi ...

javascripthtmlcss

Navigating through images via opacity changes in HTML

Is there a way to create a smooth transition effect between pictures in HTML without reloading the page? I have a series of images that I want users to navigate through by clicking a "Next" button, and I would like each image to fade into the screen. Are ...

javascripthtmlcssimagefade

Troubleshooting drag-and-drop functionality in a JavaScript HTML5 application resembling a Gmail upload interface

Here is a snapshot of my user interface: Each node in the tree structure is represented by an <li> element along with an <a> link. Furthermore, each folder serves as a dropzone for file uploads similar to the drag-and-drop feature found in Gm ...

javascriptjqueryhtmlfile-uploaddrag-and-drop

Deleting a particular tag with regular expressions: a step-by-step guide

I'm attempting to remove a ul tag along with any nested tags inside it. <ul class="related"> <li><a href="/related-1.html" target="_blank">Related article</a></li> <li><a href="/related-2.html" target="_blank"&g ...

phphtmlregex

The logo emerges from the background color, with the text consistently appearing in black

In my attempt to display a logo and text together in an Outlook page, I encountered an issue. The content from the HTML page appears different when sent to MS Outlook. Despite not using flexbox in my HTML code, Outlook interprets it differently. I am uncer ...

c#htmlcss

Issue with Animation Pause Functionality

I'm currently working on a music loader feature and I'm trying to create a toggle switch to pause and play the music. So far, I've been struggling with this functionality but managed to get it partially working on a simpler project, which yo ...

javascripthtmlcssanimationsass

Unable to view image stored as a blob

https://i.stack.imgur.com/8v90u.pngI have been studying these examples PHP display image BLOB from MySQL How to display an BLOB image stored in MySql database? They all demonstrate the same method of displaying images saved as blob. In my case, I ha ...

phphtmlmysql

Text centered vertically with jQuery is only loaded after the page is resized

My jQuery script is designed to vertically center text next to an image, but it seems to only work properly after resizing the page. $(window).load(function () { $(function () { var adjustHeight = function () { $('.vertical-al ...

javascriptjqueryhtmlcssruby-on-rails

Steps to incorporate a session into an HTML login form

Need assistance with adding a session to my HTML form connected to MySQL database. The database updates whenever the page is reloaded or when a failed submission occurs. Can anyone provide a solution for this? <body> <?php // define variables a ...

phphtmlsession

Retrieving the value of a specific image using Jquery

<div id="choose"> <div class="picked"> <img src="/def/image1.png"> </div> <div> <img src="/def/image2.png"> </div> <div > <img src="/def/image3.png"> </div> </div& ...

javascriptjqueryhtml

Enhance your navigation bar with hover styles in React Router Dom v6

I'm having an issue with my navbar where the active styles are overriding the hover state. I want to maintain my hover state styles even on the active nav link. How can I achieve this? Here is what's currently happening: Active nav styles (look ...

cssreactjsnavbarreact-router-dom

Can a variable be assigned to an innerHTML id?

Currently in the process of mastering JavaScript, one question that remains at the forefront of my mind: is it feasible to assign a variable to an ID? <div id="example"> Code </div> Is it possible for me to use document.getElementbyID("exampl ...

javascripthtml