asked on

ASP.NET - Why is accordion not working?

I tried to make an accordion using Semantic UI in ASP.NET(MVC) but it is not working..Below is my code

@{
    ViewBag.Title = "Index";
}

<html>
<head>
    <title>MVC Semantic</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />

<script src="../../Scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="../../semantic/minified/modules/accordion.js" type="text/javascript"></script>
<script src="../../semantic/packaged/javascript/semantic.min.js" type="text/javascript"></script>
<link href="../../semantic/minified/modules/accordion.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" language='javascript'>
    $(document).ready(function () {

        $('.ui.accordion').accordion();
    });

</script>

</head>
<body>

<div class="ui accordion">
  <div class="active title">
    <i class="dropdown icon"></i>
    What is a dog?
  </div>
  <div class="active content">
    <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
  </div>
  <div class="title">
    <i class="dropdown icon"></i>
    What kinds of dogs are there?
  </div>
  <div class="content">
    <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
  </div>
  <div class="title">
    <i class="dropdown icon"></i>
    How do you acquire a dog?
  </div>
  <div class="content">
    <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
    <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
  </div>
</div>

</body>
</html>

Open in new window

Please help me :(

Prakash Samariya

Please change the sequence of script like below and try:
<script src="../../semantic/packaged/javascript/semantic.min.js" type="text/javascript"></script>
<script src="../../semantic/minified/modules/accordion.js" type="text/javascript"></script>

Jhovyn Marcos

ASKER

Thank you for the time @Prakash Samariya but it is not working.. See my code below

<script src="../../Scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="../../semantic/packaged/javascript/semantic.min.js" type="text/javascript"></script>
<script src="../../semantic/minified/modules/accordion.js" type="text/javascript"></script>
<link href="../../semantic/minified/modules/accordion.min.css" rel="stylesheet" type="text/css" />

Open in new window

ASKER CERTIFIED SOLUTION

Prakash Samariya

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial