I'm trying to add a button or a tag in the header of the accordion. nearby toggle arrow(up/down)

[SOWJANYA C]

 I'm trying to add a button or a tag in the header of the accordion. nearby toggle arrow(up/down)

I've accordion with two items and I'd like to add a button before the toggle arrow on the first item with some action text for the user to click 

on button click, I'm trying to open the second item 

So I'd like to know how I can add the button in the header also how can I change the colors/Style of accordion

[Ravikumar Venkatesan]

Hi Sowjanya, 

  

Greetings from Syncfusion support. 

  

Based on your requirement we have prepared the below sample. 

  

Q1: You can add the custom button to the accordion headers with the help of created event with the below code. 

  

Step 1: Bind the created event to the Accordion like the below. 

  

[index.cshtml] 

    <ejs-accordion id="defaultAccordion" created="onCreated"> 

        <e-accordion-accordionitems> 

            <e-accordion-accordionitem expanded="true" header="ASP.NET" content="Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface."></e-accordion-accordionitem> 

            <e-accordion-accordionitem header="ASP.NET MVC" content="The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication."></e-accordion-accordionitem> 

        </e-accordion-accordionitems> 

    </ejs-accordion> 

  

Step 2: Add the buttons dynamically in the created event like the below. 

  

[index.cshtml] 

<script> 

    function onCreated(args) { 

        // Adding button to the accordion items 

        var firstButton = new ej.buttons.Button(); 

        var firstButtonEle = ej.base.createElement('button', { id: 'headerOne' }); 

        firstButtonEle.innerText = 'Header 1'; 

  

        var secondButton = new ej.buttons.Button(); 

        var secondButtonEle = ej.base.createElement('button', { id: 'headerTwo' }); 

        secondButtonEle.innerText = 'Header 2'; 

  

        firstButton.appendTo(firstButtonEle); 

        secondButton.appendTo(secondButtonEle); 

  

        var accordion = document.getElementById('defaultAccordion'); 

        var items = accordion.querySelectorAll('.e-acrdn-header'); 

  

        items[0].appendChild(firstButtonEle); 

        items[1].appendChild(secondButtonEle); 

  

        // Binding events to the accordion items 

        firstButtonEle.addEventListener('click', headerOneClick); 

        secondButtonEle.addEventListener('click', headerTwoClick); 

    } 

  

    // Function definition for events 

    function headerOneClick(args) { 

        if (args.target.id === 'headerOne') { 

            alert('1st Accordion item is clicked.'); 

            // The below code stops the effect of the parent element event. 

            args.stopPropagation(); 

        } 

    } 

  

    function headerTwoClick(args) { 

        if (args.target.id === 'headerTwo') { 

            alert('2nd Accordion item is clicked.'); 

            args.stopPropagation(); 

        } 

    } 

</script> 

  

Q2: You can customize the Accordion with the help of CSS styles like the below code. 

  

[index.cshtml] 

<style> 

    .e-acrdn-header { 

        background-color: #191616 !important; 

    } 

  

    .e-acrdn-header-content { 

        color: #007bff !important; 

    } 

  

    span.e-tgl-collapse-icon.e-icons { 

        color: #007bff !important; 

    } 

  

    .e-acrdn-content { 

        background-color: #870055d9; 

        color: white !important; 

    } 

  

    .e-control.e-btn.e-lib { 

        margin-left: 12px !important; 

        vertical-align: initial; 

        background-color: white; 

    } 

</style> 

  

Sample: https://www.syncfusion.com/downloads/support/forum/152824/ze/EJ2-Accordion-Customization2144698869 

  

Kindly try the above sample and get back to us If you would require any further assistance. 

  

Regards, 

Ravikumar Venkatesan