jQuery can be used to relocate buttons on a webpage

When the Contact button is clicked, how can I move the Close button below #panel? It's currently fixed in position.

Here's my demonstration: https://jsfiddle.net/25u78gff/

https://i.sstatic.net/qDad9.png

jQuery('.sub-menu').addClass('dropdown-menu');

jQuery(document).ready(function($) {

$('ul.nav li.dropdown, ul.nav li.dropdown-submenu').hover(function() {
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut();
});
var abierto = false;
jQuery("#open").click(function() {
    if (!abierto) {
        jQuery("div#panel").slideDown("slow");
        jQuery("#open").html("Close");
        abierto = true;
    } else {
        jQuery("div#panel").slideUp("slow");
        jQuery("#open").html("Contact us");
        abierto = false;
    }
});


}); 
/* Latest compiled and minified CSS included as External Resource*/

// Additional CSS rules...
javascriptjqueryhtmlcss

Answer №1

One: it is advised to utilize $(this) instead of $('#open') within the .click() function

Two: include the following in your CSS:

.contact-details{ position:relative; }

Replace your $('#open').click() with this

JS Fiddle

var abierto = false;
jQuery("#open").click(function() {
  if (!abierto) {
    var h = $('#panel').height() + 40;
    jQuery("div#panel").slideDown("slow");
    $(this).html("Close");
    $(this).parents('.contact-details').animate({'top': h}, 600);
    abierto = true;
  } else {
    jQuery("div#panel").slideUp("slow");
    $(this).html("Contact us");
    $(this).parents('.contact-details').animate({'top': 0}, 700);
    abierto = false;
  }
});

Answer №2

Once the "Contact Us" button is clicked, a specific class can be added to position the button below the panel.

Styling in CSS

.close {
    position:absolute;
    top: 280px;
}

Using Javascript

$('.tab').addClass('close');

The class can then be removed when the button is clicked again.

$('.tab').removeClass('close');

Here's a link to the JSFiddle example

Answer №3

Have you considered including a toggle button directly within the panel for sliding purposes? This way, the button would seamlessly move along with the panel without the need for any jQuery implementation.

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: the specified item is not a valid function

As a newcomer to the world of JavaScript, I am eager to learn and explore new concepts. Currently, my focus is on centralizing the code for accessing my MySQL database within my Express JS server using promises. Below is an attempt I have made in achieving ...

javascriptnode.jsexpress

Tips for keeping the hover effect of a sibling element in Material-UI

Card Component import image from "../../Assets/pic.jpg"; import React, { useState } from "react"; import { makeStyles } from "@material-ui/core/styles"; import Card from "@material-ui/core/Card"; import CardActionAre ...

javascriptcssreactjsmaterial-uiinline-styles

What is the significance of incorporating vinyl-source-stream into gulp in my workflow?

Recently, I've been experimenting with gulp and browserify to convert my .jsx files into .js files. var gulp = require('gulp'); var browserify = require('browserify'); var reactify = require('reactify'); gulp.task(&apos ...

javascriptnode.jsgulpbrowserify

An error has occurred: Noty (notification library) is not defined in this AngularJS Web Application

I am currently diving into the world of AngularJS and building a web application from scratch. As a newbie to AngularJS, I want to point out that I might be missing something crucial. An issue has arisen: After installing the Noty library (npm install no ...

javascriptangularjsnpmdefinednoty

What's the best way to update the menu element colors as I scroll down the page?

I am looking to update the color scheme of menu elements as the page scrolls using the provided template. I tried a few methods, but they lack dynamism. How can I make it more dynamic? $(document).ready(function(){ //scroll animation $('.navigati ...

jqueryhtmlcss

Omit specific TagNames from the selection

How can I exclude <BR> elements when using the statement below? var children = document.getElementById('id').getElementsByTagName('*'); Is there a special syntax for getElementsByTagName that allows me to achieve this, or is the ...

javascriptsyntaxwildcard

Closing WebSocket connection after sending data

I came across an interesting blog post titled Experimenting with Node.js and decided to try setting it up on my own using the author's provided gist. Unfortunately, I encountered some issues. After further investigation, I discovered that even though ...

javascripthtmlnode.jswebsocket

Is it possible to rearrange the order of rows and columns based on the viewport size?

Is it possible to achieve two different layouts with Bootstrap 5 based on the viewport size? I want to avoid using display:none and JS/Jquery tricks if possible. I attempted to accomplish this by utilizing Bootstrap 5 tools, but encountered issues on lar ...

htmlcsstwitter-bootstrapbootstrap-5

Is it possible to modify the CSS styling in React using the following demonstration?

I am attempting to create an interactive feature where a ball moves to the location where the mouse is clicked. Although the X and Y coordinates are being logged successfully, the ball itself is not moving. Can anyone help me identify what I might be overl ...

javascriptcssreactjstypescript

What could be causing my jQuery script to malfunction?

After scouring through numerous Stack Overflow questions and conducting countless Google searches, I am still stumped by the issue at hand. As a beginner in web development, all I want is for this simple page to function properly. Can someone please point ...

javascriptjqueryhtmlcss

Incorporating an SVG with CSS styling from a stylesheet

After exploring various articles and questions on the topic, I am yet to find a definitive solution. I have an external file named icon.svg, and my objective is to utilize it across multiple HTML files with different fill colors and sizes for each instanc ...

javascripthtmlcssangularjssvg

Extract the sub-element within a parent element using Vue event handling

Objective The main aim is to add a class to the dropdown element .menu-item-dropdown whenever the user clicks on the .menu-item element. Issue Currently, when clicking on the .menu-item element, the returned value from the console.log inside the showMob ...

javascriptvue.js

Vue3: Pinia store data not being received

Having trouble retrieving Pinia data using the Composition API after a page reload? I'm utilizing Vue to parse fetched JSON data. Despite being new to the Composition API, I can't pinpoint what's causing the issue even after going through th ...

javascriptvue.jsvuejs3piniavue-reactivity

Insert text into the cursor location within Summernote using JQuery

Currently, I am working on a flutter application where I have implemented the summernote editor using JQuery. ClipboardData data = await Clipboard.getData(Clipboard.kTextPlain); String txtIsi = data.text .replaceAll("'", '\&bsol ...

javascripthtmljqueryflutterwebview

React Application Issue: Unable to successfully redirect to the homepage upon logging in

Attempting to create a web application with the MERN stack is causing some trouble when trying to redirect users to the home page post-login. Here's how it should ideally function: User inputs login details The server validates these details and gene ...

javascriptnode.jsreactjsreact-router-dom

Sending data over a network using Socket and node.js

Trying to update a location on a Google Map using socket.io and node.js. I have 2 different methods for updating the map. There may be some basic issue as I am new to this. 1) Method using an API call that works: app.post('/location', function( ...

javascriptnode.jssockets

Retrieving POST data from requests in Node.js

My goal is to extract parameters from a POST request and store them in the variable postData using the request module. I found helpful information on handling post requests with Express.js here. Additionally, I came across this useful thread on how to retr ...

javascriptnode.jsexpresshttp-post

Is it possible to utilize struts tags within HTML tags to set their attributes?

I have come across this code snippet but haven't tested it out yet: <input type="checkbox" id="<bean:write name="element" property="idvalue" />" /> Would this code work as intended? Additionally, are there more efficient ways to achieve ...

htmlstruts

How can we incorporate dynamic HTML elements into a React JS application?

My code seems to be having an issue. I'm working on a registration form and trying to include an error message if the passwords entered do not match. For some reason, I am unable to dynamically add a para tag to my HTML. Any insights on why this could ...

javascriptreactjsdynamic-html

Can you explain the purpose of the equals sign in ngRepeat?

Can you explain the significance of the equals sign in the ng-repeat attribute value? <li ng-repeat="person in people = (people | orderBy: firstname)"> rather than using: <li ng-repeat="person in people | orderBy: firstname"> I coul ...

javascriptangularjs