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

Development of a custom waterfall toolbar design using MUI framework

I've been working with a setup similar to the one found here: https://codesandbox.io/s/1op5mqq9oq By clicking on the checkboxes, the <Toolbar /> is displayed. As you scroll down the page, the <Toolbar /> remains fixed at the top and even ...

Add the AJAX response to a div element when the submit button is pressed

Working on a WordPress project involving an AJAX call, I need to return the result of a row to a div with the ID #hero. The challenge is that since the result is inside a for loop and each row has its own hero div, I want the result to be returned to the c ...

Displaying overlay when sidebar menu is expanded

I am working on creating a smooth overlay transition for when the sidebar menu opens and closes. When the overlay is clicked, I want the menu to close. This is what I have so far: $(document).ready(function() { $('#menu-toggle').click(fun ...

Retrieving the content of an updated iframe using jQuery

I've tried various solutions from similar questions in the past, but none of them have worked for me so far. $(document).ready(function(){ alert($('#my_iframe').contents().html()); //displays null }); In my case, I have a thickbox with ...

TypeScript combined with Vue 3: Uncaught ReferenceError - variable has not been declared

At the start of my <script>, I define a variable with type any. Later on, within the same script, I reference this variable in one of my methods. Strangely, although my IDE does not raise any complaints, a runtime error occurs in my console: Referenc ...

Unable to transfer a value from a CGI script back to an HTML form

When working with an HTML form that has a date field named cdt, I encountered the need to retain the date value when submitting data to an Oracle table through a CGI script. To achieve this, instead of using Javascript code like history.go(-1), I aimed to ...

Use CSS to style an unordered list into a dropdown menu

Would it be feasible to style an unordered list to resemble a dropdown menu using only CSS, without relying on external libraries like jQuery or MooTools? Appreciate your insights. Warm regards, Neil. ...

Requesting an image from the live website using a GET method

Recently, I registered a domain for my personal website. While the site is still a work in progress, I noticed that the logo image fails to display when viewed through the browser on the site. Surprisingly, it shows up perfectly fine when accessed via loca ...

Autocomplete feature in MUI allows filtering to begin after typing at least 3 characters

I've encountered an issue with the Autocomplete MUI component I'm using to filter a list of checkboxes. The popup with options should remain open at all times, but I only want the filtering to be triggered when the user input is more than 3 chara ...

Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)? I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had any luck so far div.items { ...

Pass the input value directly to typescript without the need for a send button

I am looking to capture user input from a regular text box: <form> <input type="text" oninput="sendInput()" /> </form> My goal is to send the user's typed input directly to a typescript file without the need for a submit button ...

Vuetify's v-text-field not properly aligning text to the center

The alignment of the text in v-text-field is causing issues for me, as I am unable to center it. Despite attempting various solutions, I have not been successful. 1. <v-text-field type="number" class="mr-2 text-center"></v-te ...

Create a dropdown menu option that changes based on the number of items that have been

I need a selection option that displays values 1 to 5. Depending on the selected value, it should generate select options equal to the number selected. For example, if I choose 3, then it should generate 3 select options. Is it possible to loop the ajax in ...

How can we show a div element when hovering over another element using css-in-js?

Is there a way to use material ui withStyles component in order to show information only on hover for a specific div? ...

Displaying line breaks <br> on the browser when there are characters stored in the database

Within my mongo database, there is a document containing a field called reviewText: 'this is line 1\nthis is line 2',. This text was entered by a user in a textarea, hence the presence of \n to represent line breaks. I want to display t ...

Leverage the version attribute within package.json within one of its scripts

Is there a way to access the version attribute of my package.json file within one of its scripts? I want to include the version number in the name of the JS bundle, instead of using a hash as an identifier. This is what I currently have: "build-js": "bro ...

Guidelines for converting a number into an array of strings using JavaScript

Task: Write a function that takes a number and returns an array of strings, each element being the number cut off at each digit. Examples: For 420, the function should return ["4", "42", "420"]; For 2017, the function should return ["2", "20", "201", "2017 ...

Do developers only need type definitions for npm packages on their local machines?

It is my understanding that type definition modules for npm packages offer developers intellisense, eliminating the need to guess parameter types when using library methods. These modules have proven to be extremely valuable in my typescript project, esp ...

Challenges with splitting asynchronous code in NPM modules

Earlier, I posted a query on Stack Overflow I have recently established a local package within the main app's package.json: "contact-page": "file:local_modules/contact-page" The package.jsonmain and scripts sections for the contact module are confi ...

Customizing Angular 2's Webpack environment setup dynamically

Currently, I have set up Webpack to compile my Angular project. Within my project, there is an important file called env.js: module.exports.ENV = { API_URL: "http://localhost:5001/", ... }; In the webpack.common.js file, I am referencing this file l ...