1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to make Accordion interactive with images to display right hand?

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

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






3 Replies 1 reply marked as answer
SK Satheesh Kumar Balasubramanian Syncfusion Team November 17, 2020 08:56 AM UTC

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. 

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

 
 
 
Regards, 
Satheesh Kumar B 


GC Gcobani November 18, 2020 09:54 AM UTC

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

SK Satheesh Kumar Balasubramanian Syncfusion Team November 19, 2020 12:57 PM UTC

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.  
  
Kindly try the above sample and get back to us, if you need further assistance. 
 
 
Regards,  
Satheesh Kumar B  



Marked as answer
Loader.
Up arrow icon