Using jQuery Accordion within the MVC Framework

I'm new to MVC and considering using an accordion. However, I'm facing issues as the accordion does not appear despite adding all necessary references for jquery accordion and creating the div.

Here is my code:

@{
    ViewBag.Title = "Online Coach Tracker | Workforce Reporting and Business Intelligence";
}

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="../../development-bundle/themes/base/jquery.ui.all.css">
        <script src="../../js/jquery-1.10.2.js"></script>
        <script src="../../development-bundle/ui/jquery.ui.core.js"></script>
        <script src="../../development-bundle/ui/jquery.ui.widget.js"></script>
        <script src="../../development-bundle/ui/jquery.ui.accordion.js"></script>
        <link rel="stylesheet" href="../../development-bundle/demos/demos.css">
        <script>
            $(function () {
                $("#accordion").accordion({
                    collapsible: true
                });
            });
        </script>
    </head>
    <body>
        <div id="accordion">
            <h1><a href="#1">Section 1</a></h1> 
            <div>Content of section 1</div>

            <h1><a href="#2">Section 2</a></h1> 
            <div>Content of section 2</div>
        </div>
    </body>
</html>

Your help is greatly appreciated!

Answer №1

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script>
            $(function () {
                $("#accordion").accordion({
                    collapsible: true
                });
            });
  </script>  
</head>
<body>
    <div id="accordion">
        <h1><a href="#1">Section 1</a></h1> 
         <div>In section 1</div>

         <h1><a href="#2">Section 2</a></h1> 
         <div>In section 2</div>
    </div>
</body>
</html>

You can view the code on this link as well: http://jsfiddle.net/sampleuser123/FDdLL/7/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message: The md-autocomplete function is throwing a TypeError because it cannot read the property 'then' of an undefined object

I am encountering an issue with the md-autocomplete component from angular material. Here is my code snippet: <md-autocomplete required md-search-text="searchTxt" md-selected-item-change="setModelValue(item.name)&q ...

Ways to incorporate a smooth transition between the opened and closed fab functionality

I am currently utilizing VueJS and Vuetify in my project. I have successfully implemented Vuetify's FAB component, which displays a list of fab buttons as demonstrated in the documentation: <div id="fab-button"> <v-speed-dial v-mo ...

Checking to see if the prop 'isChecked' has been modified

I'm currently facing a challenge with testing whether a class's prop value changes after clicking the switcher. Below is the component class I am working with: import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core&a ...

Inserting a line break in real-time within a JSX statement

Currently working on a React application that retrieves song lyrics from an API. The API provides me with a lyrics_body attribute as a string, which I use to showcase the lyrics on the webpage. However, when React renders it, the format is not ideal becau ...

Create queries for relays in a dynamic manner

I'm using Relay Modern for my client GraphQL interface and I am curious to know if it is possible to dynamically generate query statements within Relay Modern. For example, can I change the original query structure from: const ComponentQuery = graphq ...

Here is a unique version: "A guide on centering a carousel item in jquery upon being clicked."

Does anyone know how to center the item I click in a carousel? I've searched high and low for a solution but couldn't find a clear answer. Can someone please assist me with this? This is what I have tried so far: http://jsfiddle.net/sp9Jv/ Here ...

What is the best way to transmit extra data when tunneling a TLS connection?

I have developed a basic HTTP proxy that utilizes the HTTP CONNECT method for HTTP tunneling. const http = require('http'); const https = require('https'); const pem = require('pem'); const net = require('net'); con ...

The code begins executing even before the function has finished its execution

I believe that is what's happening, but I'm not entirely sure. There's code in a .js file that invokes a function from another .js file. This function performs an ajax call to a php page which generates and returns a list of radio buttons wi ...

I am puzzled as to why my ajax script is giving me a 404 error even though the URL appears to be correct

Even though it's not a cross-domain problem, Ajax is returning a 404 error code. In my TIZEN Web application project, I am trying to make an ajax request to a WebService that contains functions necessary for the project. Initially, the xhr.status was ...

What is the best way to eliminate file extensions from hyperlinks in this particular scenario?

Looking for solution in editing a php gallery code to adjust hyperlink destination. This php gallery script generates a gallery from a folder of images which, when clicked on, opens a larger preview with a hyperlink. However, the issue is that the link in ...

Using Python, Scrapy, and Selenium to extract dynamically generated content from websites utilizing JavaScript

I am currently utilizing Python in combination with Selenium and Firefox to extract specific content from a website. The structure of the website's HTML is as follows: <html> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> ...

Executing Multiple AJAX Functions with when()

My goal is to use jQuery's when() method to run multiple Ajax functions upon form submission. The plan is to wait for these functions to finish and then finally submit the form. However, it seems like my code is not working as intended: $('form[ ...

Trouble with custom font updates in Hugo using Blogdown

Recently, I've been immersing myself in Blogdown to create my own personal data blog: Using the academic theme as a base, I successfully tweaked the color scheme without any hiccups. However, despite making adjustments in my params.yaml file, none o ...

CSS Priority - determining the ultimate winner

I have an upcoming exam and I'm reviewing the previous exam paper that was given to me. The question is: When multiple style sheet rules are applied to the same element, which type of rule takes precedence? a. Any declaration from the browser b. ...

`The font appears extremely thin when viewed on Safari and iOS devices.`

I'm struggling to resolve the issue with super-thin fonts on Safari/iOS despite trying all recommended solutions. Here is the comparison: https://i.stack.imgur.com/5DVHz.png The _document.js file: import Document, { Html, Head, Main, NextScript } fr ...

Having trouble grasping the problem with the connection

While I have worked with this type of binding (using knockout.js) in the past without any issues, a new problem has come up today. Specifically: I have a complex view model that consists of "parts" based on a certain process parameter. Although the entire ...

What is the process by which Node can access predefined variables in clustering?

Consider the following code snippet: var running = false; var cluster = require('cluster'); if(cluster.isMaster){ cluster.fork(); running = true; } If this code is executed within multiple forks, would the value of 'running' ...

Extract data from a deeply structured JSON object

Here is the structure of my JSON data: "{\"total_entries\":2,\"current_page\":1,\"total_pages\":1,\"per_page\":2,\"items\":[{\"workspace\":{\"background_color\":\"#ffedd3\",&b ...

Why is it that in React the render method is automatically bound to the component instance, while custom methods are not provided

Why is the render method automatically bound to the component instance in a class, but custom methods such as event handlers are not? I realize that using the bind keyword can make these event handlers work, but I'm curious to know why "this" can be ...

Conceal / reveal minuscule letters

Is it feasible to hide or select only the lowercase characters of a string using CSS? <p>Richard Parnaby-King</p> How can I display just RPK? While ::first-letter allows me to show the letter R, is there a way to go further with this? p ...