How to make Accordion interactive with images to display right hand?

[Gcobani]

Hi Team

I need some samples in Asp.Net mvc where accordion uses the following image below, it must show images and be functional like this..;

[Satheesh Kumar Balasubramanian]

Hi Gcobani, 

  

Greetings from Syncfusion Support. 

  

We have validated your reported query "How to make Accordion interactive with images to display right hand?" and prepared sample based on your requirement. 

  

Code snippet:  

@Html.EJS().Accordion("accordion").Width("600px").Expanding("expanding").Items(new List<AccordionAccordionItem>{ 

new AccordionAccordionItem { Header = "#header1", Expanded = true, Content = "#athletics", CssClass="toggle-class"}, 

new AccordionAccordionItem { Header = "#header2", Content = "#water_games", CssClass="toggle-class"} 

}).Render() 

@Html.EJS().ContextMenu("contextmenu").Target("#menu").Items(ViewBag.menuItems).Render() 

  

<div id="header1" style="display:none"> 

    <div class="e-acrdn-header-icon"><span id="menu" class="e-acrdn-icons e-popup-down-icon e-icons" style="float:right;padding-top:10px"></span><span id="add" class="e-acrdn-icons e-add-icon e-icons" style="float:right;padding-top:10px;padding-left:290px;padding-right:10px"></span>This is an Sample Module</div> 

</div> 

  

<div id="header2" style="display:none"> 

    <div class="e-acrdn-header-icon"><span id="menu" class="e-acrdn-icons e-popup-down-icon e-icons" style="float:right;padding-top:10px"></span><span id="add" class="e-acrdn-icons e-add-icon e-icons" style="float:right;padding-top:10px;padding-left:210px;padding-right:10px"></span>Want to create an Additional Module?</div> 

</div> 

<ul id="athletics" style="display:none"> 

    <li>Marathon</li> 

    <li>Javelin Throw</li> 

    <li>Discus Throw</li> 

    <li>High Jump</li> 

    <li>Long Jump</li> 

</ul> 

<ul id="water_games" style="display:none"> 

    <li>Diving</li> 

    <li>Swimming</li> 

    <li>Marathon Swimming</li> 

    <li>Synchronized Swimming</li> 

    <li>Water Polo</li> 

</ul> 

  

<style> 

    .e-add-icon::before { 

        content: '\e823'; 

    } 

  

    .e-popup-down-icon::before { 

        content: '\e984'; 

    } 

  

    .e-acrdn-item.toggle-class .e-acrdn-header .e-toggle-icon { 

        float: left; 

        position: relative; 

    } 

</style> 

  

<script> 

    var isCollapsed = false; 

    $('.e-acrdn-icons.e-popup-down-icon').click(function () { 

        isCollapsed = true; // Use Menu Code in this block 

    }); 

    $('.e-acrdn-icons.e-add-icon').click(function () { 

        isCollapsed = true; // Use Add Code in this block 

    }); 

    function expanding(e) { 

        if (isCollapsed) { 

            e.cancel = true; 

            isCollapsed = false; 

        } 

    } 

</script> 

  

Please refer the sample in the following link. 

https://www.syncfusion.com/downloads/support/forum/159696/ze/AccordionComponent875469225 

 

Kindly try the above sample and get back to us, if you need further assistance.
 

 

 

 

Regards, 

Satheesh Kumar B 

[Gcobani]

Hi Team

I had a work around on View side, i have not be able become successfull, do you mind helping me? Let me share the code as zip file. All scipts are the same as one on the sample including _layout.cshtml. Do i need to create a controller as well? I only used the View side only.

Attachment: eNtsaAccordionLists_3735576.zip

[Satheesh Kumar Balasubramanian]

Hi Gcobani, 

  

Thanks for your update. 

  

We have compared your shared code snippet with our snippet and found some changes not included in your shared snippet. And also, we have rendered context menu items in controller side in our previous update. But, in the below modified sample we have rendered the content menu items in view side itself. Please refer the highlighted snippet changes below. 

  

Code snippet:   

@using Syncfusion.EJ2.Navigations; 

  

<!--All libraries be used here and bootstrap--> 

@Html.EJS().Accordion("accordion").Width("600px").Expanding("expanding").Items(new List<AccordionAccordionItem> 

{ 

    new AccordionAccordionItem {Header = "#header1", Expanded = true, Content = "#athletics", CssClass = "toggle-class"}, 

    new AccordionAccordionItem {Header = "#header2", Content = "#water_games", CssClass = "toggle-class"} 

}).Render() 

@Html.EJS().ContextMenu("contextmenu").Target("#menu").Items(new List<ContextMenuItem> 

{ 

    new ContextMenuItem{ Text="Cut", IconCss="e-cm-icons e-cut" }, 

    new ContextMenuItem{ Text="Copy", IconCss="e-cm-icons e-copy" }, 

    new ContextMenuItem{ Text="Paste", IconCss="e-cm-icons e-paste", 

        Items = new List<ContextMenuItem>(){ 

             new ContextMenuItem{ Text = "Paste Text", IconCss = "e-cm-icons e-pastetext" }, 

             new ContextMenuItem{ Text = "Paste Special", IconCss = "e-cm-icons e-pastespecial" } 

        } 

    }, 

    new ContextMenuItem{ Separator= true}, 

    new ContextMenuItem{ Text = "Link", IconCss = "e-cm-icons e-link"}, 

    new ContextMenuItem{ Text = "New Comment", IconCss = "e-cm-icons e-comment"} 

}).Render() 

  

<div id="header1" style="display:none"> 

    <div class="e-acrdn-header-icon"> 

        <span id="menu" class="e-acrdn-icons e-popup-down-icon e-icons" style="float:right;padding-top:10px"></span> 

        <span id="add" class="e-acrdn-icons e-add-icon e-icons" style="float:right;padding-top:10px;padding-left:290px;padding-right:10px"></span> 

        This is an Sample Module 

    </div> 

</div> 

  

<div id="header2" style="display:none"> 

    <div class="e-acrdn-header-icon"> 

        <span id="menu" class="e-acrdn-icons e-popup-down-icon e-icons" style="float:right;padding-top:10px"></span> 

        <span id="add" class="e-acrdn-icons e-add-icon e-icons" style="float:right;padding-top:10px;padding-left:210px;padding-right:10px"></span> 

        Want to create an Additional Module? 

    </div> 

</div> 

Please refer the sample in the following link.  

https://www.syncfusion.com/downloads/support/forum/159696/ze/AccordionComponent2092426970 

  

Kindly try the above sample and get back to us, if you need further assistance. 

 
 

Regards,  

Satheesh Kumar B