Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
meghna nmeghna n 

accordion issue in lightning

I have given a image with this post so I want to design accordions
side by  side as given in the image below.

accordion
As of now I have done like this
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
     <lightning:accordion aura:id="accordion1">
                
               <lightning:accordionSection name="A" label="Behavioral Health Professionals"/>
               <lightning:accordionSection name="B" label="Urgent Care"/>
                <lightning:accordionSection name="B" label="Hospital"/>
                
        </lightning:accordion>
          <lightning:accordion aura:id="accordion2">
                
               <lightning:accordionSection name="A" label="Primary Care"/>
               <lightning:accordionSection name="B" label="Peditrician"/>
                <lightning:accordionSection name="B" label="Dermatologist"/>
                
        </lightning:accordion>
             
  </aura:component>

My requirement is two fold.
a. To keep the accordions to the right hand side of the screen using
     slds classes only (CSS only if required)
b. the accordions should be side by side as shown in image.

I am struggling with slds classes so kindly let me know with piece of working code.

thanks
meghna
 
Best Answer chosen by meghna n
Deepali KulshresthaDeepali Kulshrestha
Hi meghna,
Greetings to you!

- Lightning layout will help you to design layout as given in the image.

- I designed your image layout as per given in the image. Here i am sharing you code as per your request.
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

    <lightning:layout multipleRows="true">
        <lightning:layoutItem size="4" class="slds-box">
            <lightning:accordion aura:id="accordion1" title="Frequent Searches">
                <lightning:accordionSection name="A" label="Behavioral Health Professionals"/>
                <lightning:accordionSection name="B" label="Urgent Care"/>
                <lightning:accordionSection name="B" label="Hospital"/>
            </lightning:accordion>
        </lightning:layoutItem>
        <lightning:layoutItem size="4" class="slds-box" title="Medical Specialist">
            <lightning:accordion aura:id="accordion2">
                <lightning:accordionSection name="A" label="Primary Care"/>
                <lightning:accordionSection name="B" label="Peditrician"/>
                <lightning:accordionSection name="B" label="Dermatologist"/>
            </lightning:accordion>
        </lightning:layoutItem>
        <lightning:layoutItem size="4" class="slds-box">
            <lightning:accordion aura:id="accordion1" title="Procedures">
                <lightning:accordionSection name="A" label="Behavioral Health Professionals"/>
                <lightning:accordionSection name="B" label="Urgent Care"/>
                <lightning:accordionSection name="B" label="Hospital"/>
            </lightning:accordion>
        </lightning:layoutItem>
    </lightning:layout>

</aura:component>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.

All Answers

meghna nmeghna n
I did as follows. 

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
      <div class="c-container">
        <lightning:layout>
            <lightning:layoutItem padding="around-small" class="right-align">
                <div class="custom-box">
          <ui:outputText value="Frequent Searches"/>
          <lightning:accordion aura:id="accordion1">
                
               <lightning:accordionSection label="Urgent Care"/>
               <lightning:accordionSection label="Urgent Care"/>
        </lightning:accordion>          
        </div>
        </lightning:layoutItem>
              <lightning:layoutItem padding="around-small">
                <div class="custom-box">
                      <ui:outputText value="Medical Specialities"/>
             <lightning:accordion aura:id="accordion2">
                
               <lightning:accordionSection label="Primary Care"/>
               <lightning:accordionSection label="Peditrician"/>
               
                 <!--Inner accordion-->
                  <lightning:accordion aura:id="accordion3">
                      <ui:outputText value="Dental Specialities"/>
                       <lightning:accordionSection label="Primary Care Dentist"/>
                         <lightning:accordionSection label="Orthodontist"/>
                      
                  </lightning:accordion>
                      
        </lightning:accordion>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="custom-box">
                 <ui:outputText value="Procedures and Conditions"/>
          <lightning:accordion aura:id="accordion4">
                
               <lightning:accordionSection label="Gallbladder surgery"/>
               <lightning:accordionSection label="Colonoscopy"/>
               
        </lightning:accordion>         
          </div>
            </lightning:layoutItem>
           
        </lightning:layout>
    </div>
</aura:component>
I guess I am able to achieve something similar to the screen I showed.
But is there a better way of doing and also I want to align the accordions to the right hand side of the page.
 
Please let me know.

thanks
meghna
Deepali KulshresthaDeepali Kulshrestha
Hi meghna,
Greetings to you!

- Lightning layout will help you to design layout as given in the image.

- I designed your image layout as per given in the image. Here i am sharing you code as per your request.
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

    <lightning:layout multipleRows="true">
        <lightning:layoutItem size="4" class="slds-box">
            <lightning:accordion aura:id="accordion1" title="Frequent Searches">
                <lightning:accordionSection name="A" label="Behavioral Health Professionals"/>
                <lightning:accordionSection name="B" label="Urgent Care"/>
                <lightning:accordionSection name="B" label="Hospital"/>
            </lightning:accordion>
        </lightning:layoutItem>
        <lightning:layoutItem size="4" class="slds-box" title="Medical Specialist">
            <lightning:accordion aura:id="accordion2">
                <lightning:accordionSection name="A" label="Primary Care"/>
                <lightning:accordionSection name="B" label="Peditrician"/>
                <lightning:accordionSection name="B" label="Dermatologist"/>
            </lightning:accordion>
        </lightning:layoutItem>
        <lightning:layoutItem size="4" class="slds-box">
            <lightning:accordion aura:id="accordion1" title="Procedures">
                <lightning:accordionSection name="A" label="Behavioral Health Professionals"/>
                <lightning:accordionSection name="B" label="Urgent Care"/>
                <lightning:accordionSection name="B" label="Hospital"/>
            </lightning:accordion>
        </lightning:layoutItem>
    </lightning:layout>

</aura:component>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.
This was selected as the best answer
meghna nmeghna n
@Deepali
This works for me... Thanks