ExpandableSection, hide arrow to expand

ExpandableSection, hide arrow to expand

  

I need to hide the arrow from the section expandable in order to disable the expand property, is it possible? 

Hi Reynaldo,

Do you mean that you want to have it always expanded or just remove the arrow image from the component?


Shashank...

Shashank Diwan wrote:

Hi Reynaldo,

Do you mean that you want to have it always expanded or just remove the arrow image from the component?


Shashank...

Hi @Shashank, i need to hide the arrow depending on the result of a list, i.e. if the list that is going to be displayed inside the expandable section is empty i need to hide that arrow so the section expandable wont expand.


Thanks in advance


Hi Reynaldo,

I got your point. 

I am sure if this is the right way of doing it, but you can have your "Content\SectionExpandable" enclosed with an IF condition with a check for Empty List.

Let me know if this helps.

Shashank


Shashank Diwan wrote:

Hi Reynaldo,

I got your point. 

I am sure if this is the right way of doing it, but you can have your "Content\SectionExpandable" enclosed with an IF condition with a check for Empty List.

Let me know if this helps.

Shashank


Actually what i need is to display only the title and disable the arrow of the content because is empty.

___________________________________

Title 1 || Sub1 || Sub 2 || etc                        v <--- need to hide this arrow :)

                                                                      



I am trying to find out if there is a property or easy way of doing it. However you can just put a IF condition which checks for the List, if it empty you don't use the "Content\SectionExpandable" rather just create another Container to show only headings.

Is it possible for you to send me the OML so that I can implement.


Shashank...

Solution

Reynaldo Merino wrote:

I need to hide the arrow from the section expandable in order to disable the expand property, is it possible? 

Hi Reyn.

it's possible what you have to do is,

enclose the section expandable inside a container add a dynamic class based upon the condition.

like below


So based on the condition you have added this class, now use this selector to show hide the icon like below

SyntaxEditor Code Snippet

.selector-class .SectionExpandable__icon.Heading2 {
    display: none;
}



Hope you understand.


Regards,

Pankaj


Solution

Pankaj pant wrote:

Reynaldo Merino wrote:

I need to hide the arrow from the section expandable in order to disable the expand property, is it possible? 

Hi Reyn.

it's possible what you have to do is,

enclose the section expandable inside a container add a dynamic class based upon the condition.

like below


So based on the condition you have added this class, now use this selector to show hide the icon like below

SyntaxEditor Code Snippet

.selector-class .SectionExpandable__icon.Heading2 {
    display: none;
}



Hope you understand.


Regards,

Pankaj


Hi Pankaj, thanks for your answer, I already try it and it hide the arrow successfully but if i click in the title section it expand and show the empty content and that's what I'm trying to avoid. 


Thanks


Hi Reyan,

If you want to avoid the click then you can use 

SyntaxEditor Code Snippet

.selector-class .SectionExpandable_header {
   
    pointer-events: none;
}


Regards,

Pankaj

Pankaj pant wrote:

Hi Reyan,

If you want to avoid the click then you can use 

SyntaxEditor Code Snippet

.selector-class .SectionExpandable_header {
   
    pointer-events: none;
}


Regards,

Pankaj

Thanks a lot!!!!! It works.


Regards.


 I'm glad I was able to help!