How to Implement Convent Accordion plugin in ASP.NET MVC

A convent accordion plugin is one of those open source plugins that are relied on JQuery. To implement this plugin, you must meet minimum requirements that are discussed below in this article. Follow the instructions shared by asp.net development experts and learn their technique to implement convent accordion plugin in asp.net MVC development.

Today we are going to implement Convent Accordion plugin in asp.net MVC. Convent Accordion plugin is an open source plugin for jQuery. This plugin is depended on jQuery. Here we will see the basic example to implement it step by step.

Requirements :

jQuery Library reference :

jQuery Easing reference :

Convent Accordion Library reference

Convent Accordion Styles reference

after downloading this file store it in JS folder, folder structure will look like this.

 JS folder structure

And store css stylesheet file in css folder.

So now first of all we need to set the reference of downloaded JavaScript libraries and css styles.

<script src=”@Url.Content(“~/js/jquery.min.js”) type=”text/javascript”></script>

<script src=”@Url.Content(“~/js/jquery.conventAccordion.js”) type=”text/javascript”></script>

<script src=”@Url.Content(“~/js/jquery.easing.1.3.js”) type=”text/javascript”></script>

<link href=”@Url.Content(“~/css/style.css”) rel=”stylesheet” />

Now we will add following HTML Content in view for Accordion:

<ol class=”rounded basic” id=”cAccordion” style=”width803pxheight125pxlist-style-typenone”>

    <li>

        <div>Slide A</div>

        <div>

            <img src=”img-demo/Image-1.png” alt=”image” />

        </div>

    </li>

    <li>

        <div>Slide B</div>

        <div>

            <img src=”img-demo/Image-2.png” alt=”image” />

        </div>

    </li>

</ol>

You can set any HTML content instead of images.

Now we need to set following script to set Convent Accordion.

<script>

    (function ($, d) {

        $(‘#cAccordion’).conventAccordion({

            autoPlay: false,

            startSlide: 1,

            remember: false,

            slideInterval: 2000,

            pauseOnHover: true,

            actOnHover: false,

            continuous: false,

            autoScaleImages: true,

            easing: ‘easeInOutQuart’

        });

    })(jQuery, document);

</script>

After Implementation it will look like this.

3

You can try and make practice for asp.net development using Convent Accordion plugin. The purpose of ASP.NET MVC web development experts is to make you learn how to implement this plugin in asp.net mvc. If you still have doubts, clear them by asking our experts.