-1

I have an ajax "load more/show less" button on my blog. The default button text is "More Posts" with a down arrow icon.

More Posts button

When the button is clicked, the text changes to "Less Posts", but I can't figure out how to change the icon to an up icon.

Less Posts button

In the code below, I need to change the value of data-icon="7" to data-icon="6".

<a class="et_pb_button et_pb_custom_button_icon el-pagination-button el-button el-show-less" href="https://wbj1.flywheelsites.com/blog/?el_dbe_page" data-icon="7">Less Posts</a>

I tried this jQuery snippet without any luck, but I'm not very skilled in javascript or jQuery so it could be wrong:

document.getElementByClassName("el-show-less").setAttribute("data-icon"), "6");
Jeremy
  • 3
  • 1
  • [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) – charlietfl Nov 28 '20 at 21:43

1 Answers1

1

If you want to change the value of data-icon using pure Javascript you can handle that like this

let element = document.querySelector('.el-show-less');
element.dataset.icon = 7;

Using jQuery you can perform that like this

let element = $('.el-show-less');
element.data('icon', 4);
Yves Kipondo
  • 5,289
  • 1
  • 18
  • 31
  • Thanks. I tried both solutions, and it didn't work. Could this be because the class '.el-show-less' isn't applied to the button until it's clicked? – Jeremy Nov 28 '20 at 20:25
  • 1
    If that's the case you have to applied that change when the button is clicked and the `.el-show-less` class is applied to the Button – Yves Kipondo Nov 28 '20 at 20:27