jQuery Accordion not showing up on screen

On my FAQ page, I have integrated a jQuery Accordion with a repeater control nested inside to display various questions and answers. The FAQ page utilizes a master page named LaunchPage.Master.

Here is the code for LaunchPage.Master:

<html>

<head runat="server">
  <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8" />
  <!-- Bootstrap 3.3.4 -->
  <link href="content/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  ...
    </head>

<body class="skin-blue-light sidebar-mini">
  ...
      <a href="#" class="logo">
        <span class="logo-mini"> </span>
      </a>
  ...
          <ul class="nav navbar-nav">
            <li class="dropdown notifications-menu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="SettingsIcon" title="Settings" runat="server">
                <i class="glyphicon glyphicon-cog" title="Settings"></i>
              </a>
  ...
</footer>
  ...
<script defer="defer" type="text/javascript" src="Content/js/jQuery/jQuery_2_1_4.min.js"></script>
</html>
jquerycssasp.netjquery-ui-accordion

Answer №1

I stumbled upon this amazing code that serves as an alternative to a jquery accordion. 

<!-- JS -->
< script type = "text/javascript" >
  $(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function() {

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');

    });
  }); < /script>
<style> .accordion-toggle {
  cursor: pointer;
}
.accordion-content {
  display: none;
}
.accordion-content.default {
  display: block;
}
</style>
<div id="accordion">
  <h4 class="accordion-toggle">Accordion 1</h4>
  <div class="accordion-content default">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-toggle">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
  </div>
  <h4 class="accordion-toggle">Accordion 3</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

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

Tips for eliminating the flash of color upon website loading

Every time I visit my site at , there's a brief moment of grey before the site fully loads. Despite being a simple landing page, it seems to be taking longer than expected to load. I suspect this issue is caused by the combination of linear gradients ...

htmlcsslinear-gradients

Scroll along the menu smoothly, without causing any disruptions to the rest of the page

I have a piece of code that works, but not exactly as I want it to. What I would like is to create a menu bar where, upon hovering over an item, the options slide out from underneath, without pushing the other menu items down. If this description isn&apos ...

jqueryhtmlcssinterfacemenu

Leveraging JavaScript Functionality with ASP.NET Identity Roles

I'm currently working on an application that utilizes JQuery DataTables. The goal is to have these tables visible to all users, but restrict the click functionality to a specific user role. One way I can achieve this is by setting up authorization on ...

javascriptc#jqueryasp.net-mvcasp.net-identity

The prependTo() function will not insert a new element

I am currently utilizing the WowBook jQuery plugin for flipbooks and have integrated thumbnails_generator.js to generate thumbnails. After adding the script to my page, I noticed that it is not functioning correctly. <script src="Scripts/js/thumbnails ...

jquery

Positioning an anchor element over an image in Internet Explorer (IE)

Encountering an issue with IE9 (and 8) involving the positioning of empty anchor elements over an image. The anchors contain text, which is pushed off the page using CSS's text-indent property. Currently working on a website with promo panels display ...

htmlcssinternet-explorerxhtml

Trouble with top attribute functionality within animate function

Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...

javascriptjqueryhtmlcss

What is the method for retrieving the text value of an element using jQuery?

A dynamically generated HTML table has field names that are also generated for each row. The structure within the table includes a <td> tag with a <span> tag nested inside. Extracting the value of each tag is the goal, attempted like so: $("#t ...

jquery

Utilizing a JSON object in JSP and integrating it seamlessly with JQuery

After developing a JSP application to retrieve search results using Lucene and storing them in a Bean, I utilized JQuery Ajax for displaying the outcomes. $.ajax({ url : "search.jsp", data : "search=test", success : function(html) { (" ...

jqueryjsonjsp

Adjust the top margin of content to account for the height of a fixed header

When dealing with a fixed header that has been removed from the HTML flow, it can be tricky to adjust the content below it. The challenge arises because the height of the header can vary based on screen size. How can we dynamically adjust the margin-top fo ...

jqueryhtmlcss

Is there a way to import data from an Excel file into a MySQL database in real-time using ASP.NET?

I am currently in the process of developing a website...and I would like to offer users the option to upload Excel file data and have it stored in a MySQL database in real-time... I would greatly appreciate any assistance with accomplishing this task... y ...

mysqlasp.netexcelimport

Ways to customize CSS styles for a single page?

<head> <link href="index.css" rel="stylesheet"> <style> #amor_di_mundo{ color:#ffffff; } </style> </head> <body> <div id='divL'> <div id='amor_di_mundo'>Amor di Mundo</div> <di ...

htmlcss

The data visualization tool Highchart is struggling to load

As I try to integrate highcharts into my website, I encounter an unexpected error stating TypeError: $(...).highcharts is not a function. Below is the code snippet in question: @scripts = {<script src="@routes.Assets.at("javascripts/tracknplan.js")" ty ...

javascriptjqueryhighcharts

setting the width of <input> fields to automatically adjust

Curious about CSS. I was under the impression that setting width:auto for a display:block element would make it 'fill available space'. However, when applied to an <input> element, this doesn't seem to hold true. For instance: <b ...

css

Attempting to align content in the middle of the page across all web browsers

I need assistance with centering all the content on my website across different screen sizes and browsers. Currently, everything appears off-center and aligned to the left on various screens I have tested. You can view the HTML and CSS code in this link. H ...

htmlcss

Position a div at the center of the page while aligning it inline with another div

Is there a way to center an element on the screen while having another element positioned to its left? I have tried using float left and adjusting the padding of the center element to match the width of the left element. However, this method may not work ...

css

How can I achieve a similar functionality to array_unique() using jQuery?

When I select values from a dropdown, they are stored as an array like ["1","2","3"] Upon each change, the code below is executed to generate a new array based on the selected values: $('#event-courses-type').on('change', function(){ ...

javascriptphpjqueryarrays

What is the secret to remaining on the same spot even after the page is reloaded?

How can I maintain the AJAX call data after a page reload? I have attempted to use code that reloads the entire page, but I would like to stay in the same location. Is there a way to achieve this without reloading the entire page? $('#updateAddressPr ...

javascriptjqueryajax

When viewing a webpage on a small browser, the content will automatically expand to fill the

Attempting to utilize responsive CSS media queries to hide the sidebar unless the screen is large or a tablet big enough in landscape mode. It appears to be functioning properly while resizing the browser, but at a certain size, it occupies the entire scre ...

cssresponsive-design

Ways to divide the vuetify-text-field-label into two lines

My vuetify text field has a label that is too long for mobile devices. I am wondering if there is a way to automatically wrap the text. I attempted using div and p, as shown in this codepen link <div id="app"> <v-app id="inspire ...

javascriptcssvue.js

Hide the menu when a menu link is selected

After conducting extensive research, I have come across several scripts that can achieve what I am trying to do. However, I am unsure of how to implement them with my particular WordPress theme. Therefore, I am seeking assistance here: The theme I am usin ...

javascriptjqueryhtmlwordpress