Can someone provide a way to replicate the collapsible panel extender feature in an HTML file?

After successfully creating a collapsible panel in an asp.net file, I attempted to transfer the client side's source code into an HTM file. Unfortunately, the collapsible panel did not function properly after copying all of the source code.

I used the "view source" feature to copy everything into a blank HTM file. While most elements are working as expected, the collapsible panel is not functioning correctly.

What could be causing this issue? Is there a way to rectify it?

Any assistance would be greatly appreciated. Thank you

Answer №1

If you're looking to add some accordion functionality to your website, consider using jQueryUI http://jqueryui.com/accordion/

Alternatively, you can achieve a similar effect using the jQuery slideToggle() function. Best regards, Nate

Answer №2

Reasoning Behind ASP.NET Framework

In a nutshell, ASP.NET is a web application framework that undergoes compilation at runtime. This means that your page transitions from objects and controls to HTML, CSS, and JavaScript; the encrypted JavaScript (ScriptResource.axd) inaccessible within your HTML page. Helpful Link on ScriptResource.axd

Solution to the Problem

The good news is, if you are utilizing AJAXToolKit (which is quite an assumption), you have the option to utilize jQuery UI Accordion with just one section. Both options have been tested and yield similar outcomes. I trust this information proves useful! jQuery Accordion Reference

Example of ASPX Implementation using AJAX (Collapsible Panel):

<form id="form1" runat="server">
  <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <ajaxToolkit:CollapsiblePanelExtender runat="server" 
        TargetControlID="Panel1" 
        Collapsed="true"
        ExpandControlID="LinkButton1" 
        CollapseControlID="LinkButton1" />

    <asp:LinkButton ID="LinkButton1" runat="server">Panel</asp:LinkButton>
    <asp:Panel ID="Panel1" runat="server">
        This is a Test
    </asp:Panel>
  </div>
</form>

Example of HTM Utilizing jQuery (Accordion):

<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#Panel1').hide();

        $('#pnlLink').click(function () {
            $(this).next().toggle();
            return false;
        }).next().hide();
    });

</script>
</head>
<body>
   <a id="pnlLink" href="#">Panel</a>
   <div id="Panel1">
    <div>
        This is a test</div>
    </div>
</body>

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

Issue encountered while adding a value from MongoDB to a list

Encountering an issue when attempting to add an element to an array using a for loop MY CODE router.get('/cart', verifyLogin, async (req, res) => { var products = await userHelpers.getCartProducts(req.session.user._id) console.lo ...

Searching for specific values within a date range in MongoDB, focusing on particular times of the day

I am working with a basic mongodb database that includes two key fields: date and value In my node project using mongoose, I have the following code to retrieve readings within a specific date range: Reading.find({ date: { $gte: startDate, $lt ...

Instructions for transferring an email attachment to a collaborative drive stored in a Google Sheets document

At the moment, I am utilizing a Google script that runs periodically on my Gmail account to retrieve all attachments labeled according to certain criteria. The issue arises when trying to access attachments within a folder located on a shared drive using t ...

Loading a Crystal Report in Code-Behind by establishing an ODBC connection

I have successfully implemented code to load a Crystal Report in c# by establishing a server connection. Here is the code snippet for loading the report: CrystalReportViewer1.ParameterFieldInfo.Clear(); string reportName = Request.QueryString["rpt"]; if ...

How do you incorporate ScrollTop animations using @angular/animations?

I'm attempting to recreate the animation showcased on Material.io: https://i.stack.imgur.com/OUTdL.gif It's relatively easy to animate just the height when clicking on the first card in the example above. The challenge arises when you click on ...

The requested API endpoint for retrieving the name could not be found on the Express

Struggling to configure the restful API for my express app. Below is my app.js code: var express = require('express'), app = express(), bodyParser = require('body-parser'), methodOverride = require('method-override'); rout ...

Tips for overlaying text onto an image

I have successfully added an image to my HTML page and used jQuery to set its opacity to 0.5. Now, I want to display a text sentence on top of this image, essentially making it a background with the text in the foreground. It's similar to a quoted im ...

Is there a way to ensure SubmitChanges only submits a specific change and not the entire list of previous changes made?

When utilizing the ASP.NET LINQ SubmitChanges method, it is important to note that it commits changes for all previous database modifications made since the last time it was called. In a specific scenario, an example code snippet would look like this: Cl ...

Iterate through an array and set each value as an element attribute using JavaScript or JQuery

My task involves manipulating an array called 'imageIds': imageIds = ["778", "779", "780", "781", "782"]; The goal is to identify all elements with the class .preview-image on the current page, based on the known length of the array. The next ...

Extracting content from a page that requires JavaScript to be rendered

I need to extract data from a dynamically rendered JavaScript page using Selenium web driver in Python3. I've tried various drivers like Firefox, Chromedriver, and PhantomJS, but I always end up with the script rather than the DOM element. Below is a ...

Sending Location Data From JavaScript to PHP via Cookies

I encountered an issue while attempting to send Geolocation coordinates from JavaScript to PHP using Cookies. The error message I am receiving is: Notice: Undefined index: data in /Applications/XAMPP/xamppfiles/htdocs/samepage.php on line 24 The file name ...

What is the reason that preventDefault fails but return false succeeds in stopping the default behavior

I'm having trouble with my preventDefault code not working as expected. While using return false seems to work fine, I've heard that it's not the best practice. Any ideas why this might be happening? if ($('.signup').length == 0) ...

Query the database to find records that match the input from the text box and present them in a drop-down menu using ASP.net/C#

I need to search my database for the value entered in a textbox and display matching results in a dropdown list. Situation: My database has a table listing injuries and diseases. If I enter "injury" in the textbox and click search, it should look for in ...

How should one approach dealing with nested asynchronous functions that depend on each other for data retrieval?

My website's user page has specific relationships that I am struggling to handle effectively: The user page requires a list of 'Post' objects. 'Post' objects need a list of 'Media' strings (only the title string field f ...

What's the issue with my ExpressJS req.query not functioning as expected?

My NodeJS repl setup includes an input, button, and h1 element. The goal is to update the HTML inside the h1 element with the value of the input upon button click. Here's a glimpse of my code: index.js: const Database = require("@replit/database ...

Iterating through a JSON object to verify the presence of a specific value

I have a JSON Object and I am looking for a way in Angular 6 to search for the value "Tennis" in the key "name". Can you provide guidance on how to achieve this? { "id":2, "name":"Sports", "url":"/sports" "children":[ { "id":1, ...

What is the best way to retrieve a Promise from a store.dispatch within Redux-saga in order to wait for it to resolve before rendering in SSR?

I have been experimenting with React SSR using Redux and Redux-saga. While I have managed to get the Client Rendering to work, the server store does not seem to receive the data or wait for the data before rendering the HTML. server.js ...

Guidelines for sending data as an array of objects in React

Just starting out with React and I have a question about handling multi select form data. When I select multiple options in my form, I want to send it as an array of objects instead of an array of arrays of objects. Can anyone help me achieve this? import ...

The promise was formed in a handler and left unfulfilled in Bluebird

Initially, I understand the need to return promises in order to prevent the warning. I have attempted returning null as suggested in the documentation here. Take a look at this code snippet which is used within Mongoose's pre-save hook, though the war ...

What could be causing my page width to only expand to 100% when using "fit-content"?

After searching extensively, I'm unable to find a solution that fits my current issue. My goal is to construct a practice ecommerce website using React. One of the components I have is a header which I'd like to occupy 100% of the screen width, c ...