Adding a button to a list element which displays the remaining elements when clicked | Experience Community
Skip to main content
Solved

Adding a button to a list element which displays the remaining elements when clicked

  • July 22, 2020
  • 1 reply
  • 18 views
K
Forum|alt.badge.img

I have a list with 5 list items. The second list item has a button after the text. When the button is clicked, the remaining list items should be displayed. But currently, the remaining items are displayed as a sub list, which is not what I am aiming for. I want the remaining items to be the part of the main list. This is how the list looks currently:
paVDZ.pngAlso in addition I want another paragraph of text to be shown below the list when the button is clicked, but the paragraph should be aligned with the "My list" text and not the bullet points.

Best answer by rondev

You need to assign all the items to same ul tag and give a class name attribute to elements 3,4,5. Also close the ul tag and add div tag with same class name as of those three elements. Hide the elements using the class selector on ready event.
Now, on the click event of the button, just show the hidden things using the class selector.

1 reply

rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • rondev
  • Level 6 ●●●●●●
  • Answer
  • July 22, 2020

You need to assign all the items to same ul tag and give a class name attribute to elements 3,4,5. Also close the ul tag and add div tag with same class name as of those three elements. Hide the elements using the class selector on ready event.
Now, on the click event of the button, just show the hidden things using the class selector.

Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
    Terms & ConditionsAccessibility statement