Using Jquery to create a slideshow with a div that is set to absolute

<!DOCTYPE html>
<html>
    <head>
        <script> 
            $(document).ready(function(){
                $("#flip").click(function(){
                    $("#panel").slideDown("slow");
                });
            });
        </script>
        <style> 
            #panel,#flip {
                padding:5px;
                text-align:center;
                background-color:#e5eecc;
                border:solid 1px #c3c3c3;
            }
            #panel {
                position:absolute;
                padding:50px;
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="flip">Click to slide down panel</div>
        <div id="panel">Hello world!</div>
        <div id="goDown">dddddddd</div>
    </body>
</html>

Check out this solution on jsFiddle

Is it possible for the "goDown" div to go down at the same time as the "panel" div appears with the position set to absolute? Your feedback is appreciated. Thank you.

Answer №1

View Demo

Javascript

  $(document).ready(function () {
      var h = $("#panel").outerHeight();
      $("#flip").click(function () {
          $("#panel").slideDown("slow");
          $("#goDown").animate({marginTop: h}, "slow");
      });
  });

Answer №2

Sure thing, take a look at this demo. Does this meet your requirements?

Here is the code snippet:

<body>
    <div id="flip">Click to slide down panel</div>
    <div id="panel">Hello world!</div>
    <div id="goDown">dddddddd</div>
</body>

This is the CSS part:

#panel,#goDown,#flip {
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel {
    position:absolute;
    padding:50px;
    display:none;
}
#goDown {
    position:absolute;
    padding:50px;
    display:none;
}

And finally, here is the JavaScript section:

$(document).ready(function(){
     $("#flip").click(function(){
         var left = $("#panel").css('width'); 
         left = parseInt(left.substr(0, left.indexOf('p')),10); 
         $("#goDown").css('margin-left', (left + 100)+'px');
         $("#panel").slideDown("slow");
         $("#goDown").slideDown("slow");
     });
 });

Answer №3

Behold the solution. It is uncomplicated and unattractive

  $(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
    $('#goDown').css({"margin-top":"120px"});
  });
});

Answer №4

This is a streamlined approach to achieve the desired result

$(document).ready(function () {
    $("#flip").click(function () {
        $(this).next().toggle("easeInOutQuint");
    });
});

See Demo The code snippet selects the following element in the HTML and toggles its visibility

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

What is the best way to turn off the jQuery Kladr plugin?

Currently, I'm incorporating the jquery kladr plugin to facilitate address autocompletion specifically for Russia. I am wondering how to deactivate this plugin should a different country be selected? ...

Is it possible to not return anything in a jQuery ajax call?

When I make an ajax call, I am using the following code: $.ajax({ url: $.grails.createLink('class', 'action'), data: {id: id1}, async: false }); This triggers a Grails method to be called: def action = { } In my expe ...

Incorporating Twitter Bootstrap into your Zend Framework 2 Navigation Menu

I have successfully created a menu from my database and the code is functioning perfectly. Now, I'm looking to enhance the menu's style by incorporating Twitter Bootstrap, but I'm encountering some difficulties in doing so. Is there anyone k ...

Imagine a complex JSON structure with multiple levels of nesting

Take a look at this JSON data : { department_1 : [{ id : 1, name = Joe Smith, email : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="660c150b0f120e2613150048030213">[email protected]</a>}, ...., { id : 500, name ...

Modify the color of drop-down menu links

Recently, I set up a drop-down menu containing links. Initially, when hovering over the names in the menu, they would change color and display the drop-down. I had successfully made all the names golden, with the hovering name turning black while display ...

The element residing within the body exceeds the body's dimensions

HTML : <body> <header> <div> </div> </header> </body> CSS : body { width : 1000px ; } header { width : 100% ; } If these codes are implemented, The header's width should be the same as the body's ...

"Learn how to retrieve and assign a value to a select2 dropdown in Vue.js

Currently, I am utilizing vuejs to create and delete dynamic select elements, which is functioning properly. To view the working example, please click here: https://jsfiddle.net/nikleshraut/fgpdp700/2/ var vm = new Vue({ el: "#app", data: { opt ...

Preventing data loss upon submitting a form (PHP)

Currently, I have an HTML file that allows users to select appointment times for specific days of the week. Once they click submit, a PHP file generates and displays a calendar with the chosen times as checkboxes. My goal is to enable users to input their ...

Modify the parent div's style if there are more than two children present (CSS exclusive)

Is there a way to use the same class, like .outer, for both divs but with different styling for the parent element when there are more than two children? Kindly refer to the example provided below: .outer1{ border: solid 6px #f00; } .outer2{ b ...

Tracking the progress bar as files are being uploaded via AJAX using HTML5

Currently, I have a progress bar that increments based on the number of files and their sizes. I am looking to implement an overall progress bar to display while uploading files to the server using AJAX and HTML5. Each file is uploaded individually to th ...

What could be causing the flexbox code to not take effect and the text to refuse wrapping?

I've been utilizing flexbox to style my content, and it worked seamlessly on the first three divs. However, when I attempted to apply the same styling to the fourth one, it didn't quite work out as planned. Despite trying options like flex-wrap t ...

The callback function for the XMLHttpRequest object is not triggered when making a cross-domain request using jQuery/Ajax

Looking for some help with this code snippet I have: $.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentCo ...

Aligning inline form controls with Bootstrap and Syncfusion widgets

I'm facing a challenge aligning the Syncfusion JavaScript widget - a dropdownlist - to be displayed inline with the label. I am using Bootstrap 3. I haven't been successful in achieving a nice alignment, meaning getting the middle of the label p ...

Filtering date ranges in two columns of Datatables

I am working on a table that contains two date columns. Currently, I have implemented a date range filter for one column (aData[3]) using the following code: $.fn.dataTableExt.afnFiltering.push( function(oSettings, aData, iDataIndex) { var dat ...

Clicking on an anchor tag will open a div and change the background color

.nav_bar { background: #c30015; margin-left: 50px; float: left; } .nav_bar ul { padding: 0; margin: 0; display: flex; border-bottom: thin white solid; } .nav_bar ul li { list-style: none; } .nav_bar ul li a { ...

Why isn't the jQuery colorbox popup appearing when triggered by the $.ajax() function?

I am currently facing an issue where I am trying to display a hidden colorbox popup using the $.ajax() method's success function, but it is not showing up. Interestingly, this had worked fine in a previous implementation where I used the data attribut ...

Show and conceal columns in HTML with the help of JavaScript

I need help with a webpage where I want to display a table with 2 columns and two rows (header and body). My goal is to use JavaScript to control the visibility of these 2 columns. The decision to show or hide the columns should be based on the values ...

Safari (mac) experiencing issues with loading material icons properly on initial attempt

Upon my initial visit to the website, I noticed that the font appeared distorted. https://i.sstatic.net/BtUxI.png However, when I right-clicked and chose "reload page", the fonts were displayed correctly. https://i.sstatic.net/3XUcA.png This issue seem ...

Can the bottom border on an input textfield be removed specifically under the new character?

This is the new visual design I received: https://i.stack.imgur.com/kiQGe.png The label CLG is represented as a label, with the line being an input type=tel. Disregard the purple overlay... The designer has requested that I remove the border when a user ...

Data formatted in JSON within a document

Recently, I came across a code snippet that demonstrated how to extract data from a JSON array: <div id="placeholder"></div> <script> var data={"users":[ { "firstName":"Ray", "lastName":"Villalobos", "joined": ...