Avatar of Jhovyn Marcos
Jhovyn Marcos

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 :(
ASP.NETC#jQueryJavaScript

Avatar of undefined
Last Comment
Prakash Samariya
Avatar of Prakash Samariya
Prakash Samariya
Flag of India image

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>
Avatar of Jhovyn Marcos
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
Avatar of Prakash Samariya
Prakash Samariya
Flag of India image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
ASP.NET
ASP.NET

The successor to Active Server Pages, ASP.NET websites utilize the .NET framework to produce dynamic, data and content-driven web applications and services. ASP.NET code can be written using any .NET supported language. As of 2009, ASP.NET can also apply the Model-View-Controller (MVC) pattern to web applications

128K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo