Repeater
A plugin to repeat groups of elements.
Projects /
A plugin to repeat groups of elements.
All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.
The Repeater Plugin can be used to clone and delete a collection of items.
The element with a class of .js-repeater__item
will be repeated each time the user clicks on the .js-repeater__add
button; the new element is appended to the .js-repeater__list
element.
<div class="js-repeater">
<ul class="js-repeater__list">
<li class="js-repeater__item">
<!-- content to be repeated here -->
</li>
</ul>
<button class="js-repeater__add" type="button">Add More</button>
</div>
Use a button with a class of .js-repeater__remove
inside the .js-repeater__item
element to have the option of removing clones.
If you want to add a custom class to the cloned elements, add a data-repeater-class
attribute to the .js-repeater
element:
<div class="js-repeater" data-repeater-class="repeater__item">
<ul class="js-repeater__list">
<li class="js-repeater__item">
<!-- content to be repeated here -->
</li>
</ul>
<button class="js-repeater__add" type="button">Add More</button>
</div>
For example, you can use this class to show the .js-repeater__remove
button for clones, while keeping it hidden for the first item.
If you are using this component to clone form fields, then each clone must have input elements with different name
/id
attributes.
For the plugin to work properly, all your inputs should have name and id values equal to customName[n][inputType]
, where:
customName
: a custom label of your choice (same value for all your input elements);n
: index of the cloned element (starting from 0);inputType
: a custom label that identifies the input.Add to the .js-repeater
element a data-repeater-input-name
attribute equal to customName[n]
.
Here's an example of a repeater for a user name/email block:
<div class="js-repeater" data-repeater-input-name="user[n]">
<div class="js-repeater__list">
<fieldset class="js-repeater__item">
<div>
<label for="user[0][name]">Name</label>
<input type="text" name="user[0][name]" id="user[0][name]">
</div>
<div>
<label for="user[0][email]">Email</label>
<input type="email" name="user[0][email]" id="user[0][email]">
</div>
</fieldset>
<!-- example of a cloned element -> [n] is now [1] -->
<fieldset class="js-repeater__item">
<div>
<label for="user[1][name]">Name</label>
<input type="text" name="user[1][name]" id="user[1][name]">
</div>
<div>
<label for="user[1][email]">Email</label>
<input type="email" name="user[1][email]" id="user[1][email]">
</div>
</fieldset>
</div>
<button class="btn btn--primary js-repeater__add" type="button">Add More</button>
</div>
Note that we have added a type="button"
to the .js-repeater__add
element. This will prevent the form from being submitted when the user clicks the button.
Create a CodyHouse account to unlock members-only features and join our community of web designers!