> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# IBAN converter materials

> The style template for the IBAN converter layer and the expand/collapse function for the additional fields, with the classes the tool expects.

The IBAN converter appears as a layer over the form in which the buyer enters their bank details, and calculates the IBAN from the account number and bank code. This page contains the style template for this layer and explains the expand/collapse function for the additional fields.

How to integrate the converter, which classes the tool expects in the markup, and which settings it supports is described on the guide page for direct debit.

Guide: Direct debit, IBAN converter for entering bank details

## The style template

Add these rules to your shop's stylesheet. They define the appearance of the layer and the fields within it.

> [accordion] Style rules for the IBAN converter
>
> ```css theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
> .ibanConverter {
> 	position: absolute;
> 	width: 715px;
> 	height: 420px;
> 	border: 2px solid #CCCCCC;
> 	background: #fff;
> 	padding: 20px 20px 20px 20px;
> 	box-shadow: 0 0 20px 0px #ddd;
> 	}
>
> .ibanConverter .column_left,
> .ibanConverter .column_right {
> 	float: left;
> 	width: 48%;
> 	}
>
> .ibanConverter .column_right {
> 	float: right;
> 	}
>
> .ibanConverter .subheadline {
> 	padding: 7px 0px;
> 	display: block;
> 	color: #C00418;
> 	margin-top: 0;
> 	}
>
> .ibanConverter label {
> 	width: 110px;
> 	}
>
> .ibanConverter select,
> .ibanConverter input[type="text"] {
> 	width: 210px;
> 	}
>
> .ibanBuild,
> .ibanAssume {
> 	background: #C00418;
> 	border: 1px solid #C00418;
> 	color: #fff;
> 	float: right;
> 	margin: 15px 0px 0px 0px;
> 	padding: 5px 5px 5px 5px;
> 	clear: both;
> 	width: 200px;
> 	text-align: center;
> 	}
>
> .ibanConverterOpen,
> .ibanClose {
> 	color: #C00418;
> 	font-size: 12px;
> 	font-weight: bold;
> 	text-align: right;
> 	text-decoration: underline;
> 	cursor: pointer;
> 	}
>
> .ibanAccountNumber,
> .ibanBankCode,
> .ibanAgency,
> .ibanCheckDigit,
> .ibanAccountType,
> .ibanRegionCode,
> .ibanField {
> 	height: 20px;
> 	border-bottom: 1px dotted #E3E3E3;
> 	padding: 6px 4px;
> 	}
>
> .clear_both {
> 	clear: both;
> 	}
>
> /* Aufklappfunktion für die Zusatzinformationen */
> .accordion a.acc_header,
> .ibanConverter .subheadline {
> 	cursor: pointer;
> 	display: block;
> 	color: #C00418;
> 	padding: 7px 0px 7px 0px;
> 	margin-top: 0;
> 	text-decoration: none;
> 	border-top: 1px dotted #E3E3E3;
> 	}
>
> .accordion a.acc_header_1 {
> 	border-top: none;
> 	}
>
> .accordion div.acc_body {
> 	padding: 10px 10px 20px 0px;
> 	}
> ```

> [!WARNING]
>
> The layer has a fixed width of 715 and a fixed height of 420 pixels. On narrow screens, it extends past the edge, and for a country with many additional fields, the height is not sufficient. Replace the width with `max-width` and omit the height before you adopt the template.

### Which classes are styled here

| Class | Element |
| - | - |
| `ibanConverter` | the layer as a whole |
| `ibanConverterOpen` | the element that opens the layer |
| `ibanClose` | the element that closes it |
| `ibanBuild` | the button for calculating |
| `ibanAssume` | the button for applying |
| `ibanAccountNumber` | the field for the account number |
| `ibanBankCode` | the field for the bank code |
| `ibanAgency` | the field for the branch |
| `ibanCheckDigit` | the field for the check digit |
| `ibanAccountType` | the field for the account type |
| `ibanRegionCode` | the field for the region code |
| `ibanField` | the field with the result |

These names are the tool's defaults. Each of them can be renamed via a parameter, in which case the stylesheet must be updated as well. The list of parameters is on the guide page.

> [!NOTE]
>
> The template also styles `column_left`, `column_right`, `subheadline`, and `clear_both`. These four classes do not belong to the tool, but to the sample markup the template was originally written for: a two-column layer with subheadings.
>
> The markup on the guide page is single-column and does not need them. If you adopt it as is, these four rules have no effect. This note has been added here.

> [!NOTE]
>
> The template contains no rules for the three areas `ibanStep1`, `ibanStep2`, and `ibanStep3`, or for `ibanCountry` and `ibanResult`. The tool itself shows and hides these areas. If you want to give them spacing or borders, add the rules.

## The expand/collapse function

For countries with many additional fields, the explanations for the individual fields can be expanded and collapsed. The previous documentation supplies a JavaScript file named `jquery.accordion.js` for this purpose.

This is the jQuery plugin **Accordion 1.6 by Jörn Zaefferer from 2007**, MIT and GPL. It does not come from WEBSALE, is no longer maintained by its author, and has long since been merged into jQuery UI.

| | |
| - | - |
| File name in the shop | `jquery.accordion.js` |
| What it is | jQuery Accordion 1.6, Jörn Zaefferer, 2007 |
| License | MIT and GPL |
| Successor | the Accordion widget in jQuery UI |

> [!WARNING]
>
> For a new integration, use the Accordion widget from jQuery UI, which your shop already includes, instead of this file from 2007. You assign the class names in the stylesheet above, `acc_header`, `acc_header_1`, and `acc_body`, yourself.
>
> If your shop already includes jQuery UI and you load this file in addition, the two overwrite each other.

The stylesheet above already contains the three rules for the expand/collapse function. You only need them if you actually make the additional fields expandable.

Reference: WEBSALE JavaScript library

> [!NOTE]
>
> Compared to the previous documentation, three issues in the template have been corrected: a missing closing semicolon after `width: 48%`, the inconsistent indentation from mixed tabs and spaces, and the typo "Acordionfunktion" in the comment.


## Related topics

- [WEBSALE JavaScript library](https://dokumentation.websale.de/en/v8s/materialien/websale-javascript-bibliothek.md)
- [Materials: subscription module](https://dokumentation.websale.de/en/v8s/materialien/materialien-abo-modul.md)
- [Directory structure of a shop](https://dokumentation.websale.de/en/v8s/materialien/verzeichnisstruktur-eines-shops.md)
- [INQUIRY materials](https://dokumentation.websale.de/en/v8s/materialien/materialien-inquiry.md)
- [Advertising materials](https://dokumentation.websale.de/en/v8s/referenz/tags/affiluser/werbemittel.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.