diff --git a/addons/payment/static/src/js/payment_form.js b/addons/payment/static/src/js/payment_form.js
index 74b098c3d72..bdac673f67e 100644
--- a/addons/payment/static/src/js/payment_form.js
+++ b/addons/payment/static/src/js/payment_form.js
@@ -14,7 +14,8 @@ odoo.define('payment.payment_form', function (require) {
             'click #o_payment_form_pay': 'payEvent',
             'click #o_payment_form_add_pm': 'addPmEvent',
             'click button[name="delete_pm"]': 'deletePmEvent',
-            'click input[type="radio"]': 'radioClickEvent'
+            'click input[type="radio"]': 'radioClickEvent',
+            'click .o_payment_form_pay_icon_more': 'onClickMorePaymentIcon',
         },
 
         init: function(parent, options) {
@@ -337,6 +338,16 @@ odoo.define('payment.payment_form', function (require) {
                 );
             });
         },
+
+        // event handler when clicking on 'and more' to show more payment icon
+        onClickMorePaymentIcon: function (ev) {
+            ev.preventDefault();
+            var $listItems = $(ev.currentTarget).parents('ul').children('li');
+            var $moreItem = $(ev.currentTarget).parents('li');
+            $listItems.removeClass('hidden');
+            $moreItem.addClass('hidden');
+        },
+
         // event handler when clicking on a radio button
         radioClickEvent: function (ev) {
             this.updateNewPaymentDisplayStatus();
diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index 446d248680f..c601d945261 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -65,13 +65,13 @@
                         <ul class="pull-right list-inline payment_icon_list">
                             <t t-set="i" t-value="0"/>
                             <t t-foreach="acq.payment_icon_ids" t-as="pm_icon">
-                                <li t-if="i &lt; 3">
+                                <li t-att-class="'' if (i &lt; 3) else 'hidden'">
                                     <span t-field="pm_icon.image_payment_form"
                                         t-options='{"widget": "image", "alt-field": "name"}' />
                                 </li>
                                 <li t-if="i==3" style="display:block;">
                                     <span class="pull-right more_option text-info">
-                                        <a href="#" data-toggle="tooltip" t-att-title="', '.join([opt.name for opt in acq.payment_icon_ids[3:]])">and more</a>
+                                        <a href="#" class="o_payment_form_pay_icon_more" data-toggle="tooltip" t-att-title="', '.join([opt.name for opt in acq.payment_icon_ids[3:]])">and more</a>
                                     </span>
                                 </li>
                                 <t t-set="i" t-value="i+1"/>
@@ -102,13 +102,13 @@
                         <ul class="pull-right list-inline payment_icon_list">
                             <t t-set="i" t-value="0"/>
                             <t t-foreach="acq.payment_icon_ids" t-as="pm_icon">
-                                <li t-if="i &lt; 3">
+                                <li t-att-class=" '' if (i &lt; 3) else 'hidden'">
                                     <span t-field="pm_icon.image_payment_form"
                                         t-options='{"widget": "image", "alt-field": "name"}' />
                                 </li>
                                 <li t-if="i==3" style="display:block;">
                                     <span class="pull-right more_option text-info">
-                                        <a href="#" data-toggle="tooltip" t-att-title="', '.join([opt.name for opt in acq.payment_icon_ids[3:]])">and more</a>
+                                        <a href="#" class="o_payment_form_pay_icon_more" data-toggle="tooltip" t-att-title="', '.join([opt.name for opt in acq.payment_icon_ids[3:]])">and more</a>
                                     </span>
                                 </li>
                                 <t t-set="i" t-value="i+1"/>