Skip to Content (Press Enter)
2019-04-11 03-16-59
Reynaldo Merino
500Views
10Comments
Solved
ExpandableSection, hide arrow to expand
Question

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


Untitled.png
0
0
02 Oct 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant
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


See solution in context
2
0
02 Oct 2018
Copy Link
2019-04-11 03-16-59
Reynaldo Merino

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


0
0
02 Oct 2018
Copy Link
2021-02-15 13-40-57
Shashank Diwan

Hi Reynaldo,

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


Shashank...

0
0
02 Oct 2018
Copy Link
2019-04-11 03-16-59
Reynaldo Merino

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


0
0
02 Oct 2018
Copy Link
2021-02-15 13-40-57
Shashank Diwan

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


0
0
02 Oct 2018
Copy Link
2019-04-11 03-16-59
Reynaldo Merino

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 :)

                                                                      



0
0
02 Oct 2018
Copy Link
2021-02-15 13-40-57
Shashank Diwan

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...

0
0
02 Oct 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant
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


2
0
02 Oct 2018
Copy Link
2019-04-11 03-16-59
Reynaldo Merino

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


0
0
02 Oct 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant

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

1
0
02 Oct 2018
Copy Link
2019-04-11 03-16-59
Reynaldo Merino

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.


0
2
02 Oct 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant

 I'm glad I was able to help!

1
0
02 Oct 2018
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.