Troubleshooting Issues with jQuery Accordion Buttons

I have a nearly complete accordion that just needs some adjustments.

HTML CODE:

    <footer>
    <div>
        <h1>Hide</h1>
        <h1>Hide</h1>
        <h1>Hide</h1>
        <h1>Hide</h1>
        <h1>Hide</h1>
        <h1>Hide</h1>
     <div>
</footer>
<h3><a href="" title="Open footer">Show</a></h3>

I need the 

<h3><a href="" title="Open footer">Show</a></h3>
element to always remain at the top and change its text to Hide when clicked, toggling between SHOW/HIDE.

I am struggling to find a solution. The code can be found here: http://jsfiddle.net/FeGea/1

javascriptjqueryhtmlcss

Answer №1

Give this a shot: http://jsfiddle.net/UHztx/

$('footer').prev('h3').find('a').toggle(function() {
    var sb = $(this).parent().next('footer').slideDown(3200);
    $('html, body').animate({ scrollTop: '+=' + sb.data('expanded-height') }, 3000);
    $(this).text('Hide');
    return false;
}, function() {
    var sb = $(this).parent().next('footer').slideUp(3200);
    $(this).text('Show');
    return false;
});

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

Looking to extract a specific field using Angular JS?

The JSON data I need is fetched from the link provided below: http://maps.googleapis.com/maps/api/geocode/json?address=SFO When retrieving the JSON, only the parameter example ?adress=sfo should be used. This will result in fetching all values associated ...

javascriptangularjsjson

Is there a way to temporarily halt a CSS animation when it reaches the final frame

Can anyone assist me with getting the "-webkit-animation-fill-mode: forwards;" to work? It seems like it's getting stuck on the first frame, and I can't figure out why. JS FIDDLE <div class="logo"></div> .logo { width: 328px; ...

csscss-animations

When using React.js, clicking on an answer option will change the color of all options, not just the one that was clicked

I'm currently working on my quiz page where all answer options change color when clicked. However, I only want the selected answer option to be colored based on its correctness. The data is being retrieved from a data.json array. export default functi ...

javascriptreactjsreact-propsuse-state

Sending JSON data through an AJAX post request will not work

After struggling for hours trying to debug this issue on my own, I've come to the point of seeking assistance. I need to send a substantial amount of data to an ashx handler and here's how it looks: var value = [{"start":["3,0"],"block":["0,0", ...

jqueryajaxjsonashx

Determine if a radio button is in an enabled or disabled state

<div id="statusOptions"> <label><input type="radio" name="status" value="T" checked> Temporary Waiver</label> <label><input type="radio" name="status" value="P"> Never Expires</label> <label><i ...

jqueryasp.netradio-buttonisenabled

What is the best way to distinguish elements in the same HTML using Angular Material?

Currently, I am working on a project using Angular material, where I have a component.html file that defines a form and a table with data. In the first image of my project, you can see the tab title, a form to add new records, and the table displaying exi ...

cssangularangular-materialgridangular11

TinyMCE removes the class attribute from the iframe element

I am trying to specify certain iframes by using a class attribute to adjust the width using CSS. The iframes I am working with are google maps embeds, similar to this one: <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0 ...

htmlcsstinymce

What is the best way to set a div's size to a constant value?

I recently designed a webpage that includes a feature where clicking a button adjusts the font size within the div. Within the div, there is a ul containing the buttons. However, when the font size changes, the div expands and the nav buttons also shift a ...

csshtmlfixed

Creating a Custom Form Control in Angular 2 and Implementing Disable Feature

I have developed a unique custom control using ControlValueAccessor that combines an input[type=text] with a datepicker. While the template-driven forms accept it without any issues, the situation changes when implementing the model-driven approach (react ...

javascriptformsangular

Steps to reinitialize the error code after removal from the roster

Currently, I am working on creating a series of textboxes and dropdown menus using jQuery. So far, the add function is functioning smoothly without any glitches. However, my issue lies within the delete function. It works well when deleting sequentially, ...

javascriptjquery

having each individual div function on its own accord

Is there a more efficient way to make HTML and CSS function independently without duplicating the code multiple times and changing IDs or class names? Currently, only the top male and female button works when clicked. I am looking for a CSS-only solution t ...

htmlcss

How can I use AngularJS to save selected assets?

<div style="z-index: 1; position: absolute"ng-show="ctrl.company.selected"> <div style="" ng-repeat="Asset in ctrl.company.selected.Assets"> <div class="pd-5"style="width: 300px; background-color: white; border-bottom: gray solid ...

javascripthtmlangularjs

Honing in on JavaScript Media Queries within React

I have been attempting to incorporate the media query concept from a resource I found here in my React project. However, when testing the code snippet below, I encountered the following error: TypeError: isMobile.addListener is not a function function App ...

javascriptreactjsmedia-queriesaddeventlistener

The outerHeight of Elements measured in pixels

Is there a way to increase the outerHeight() function by adding extra pixels? Let's say we have a variable storing the outerHeight of .pg-sect: var $section = $('.pg-sect').outerHeight(); Now, if I want to add an additional 70px to the he ...

javascriptjqueryhtmlcss

Angular's interactive dropdown menus

Currently, I am diving into Angular and working on implementing dynamic select boxes in jQuery to prompt the user for the number of children. These select boxes adapt according to the selection made, subsequently asking for the ages of the children. While ...

jqueryangularjs

Looking to update the location of an element within a canvas using Vue and socket.io?

I am currently developing a 2D pong game using vue.js and socket.io. At the moment, I have a black rectangle displayed in a canvas. My goal is to make this rectangle move following the cursor of my mouse. The issue I am facing is that although my console l ...

javascriptvue.jsvuejs2vue-component

The declaration file for module 'react-scroll-to-bottom' appears to be missing

I recently added react-scroll-to-bottom to my project and it is listed in my dependencies. However, I am encountering the following error: Could not find a declaration file for module 'react-scroll-to-bottom'. The path 'c:/Users/J/Desktop/w ...

javascriptreactjsreact-nativenpm

Minimizing repeated autofocus calls in material-ui's <TextField> component

In the realm of coding with material-ui, when dealing with the <TextField> component, it's important to keep in mind that the solution may actually lie within React itself. Let's paint a scenario where we're crafting a basic login for ...

javascriptreactjsmaterial-ui

Should a MEAN stack app require the use of two servers in order to run?

Currently, I am in the process of developing a MEAN stack application which involves using MongoDB, ExpressJs, Angular 6, and NodeJs. One issue I am facing is determining whether two servers will be necessary to run the app simultaneously. Specifically, o ...

javascriptnode.jsangularmongodbexpress

Adding CSS stylesheets on-the-fly in JavaFX

I am looking to incorporate a CSS file from the filesystem into my application. The goal is to allow users to dynamically add JavaFX CSS files that can be created by anyone and stored anywhere on their system. I attempted a test scenario to see if adding ...

javacssjavafx