Move one div to reveal another underneath

I currently have a div housing various products that can be added by clicking the add link. Whenever the add link is clicked, an information message appears briefly before fading out after 4 seconds.

This message shows up at the top of the childbox-content div, which may not be visible to the user if they scroll down in the div and interact with one of the last li elements.

My inquiry is how I could make the info div slide under the "Test" header instead of where it currently appears. The header is always in view for the user.

For reference, please check out this jsFiddle

EDIT: Additionally, I am experiencing difficulties getting the info div to display properly on the jsFiddle after clicking the add link. Unsure about the reason behind this issue.

jquerycsshtmlslide

Answer №1

Initially, the class assigned to each link in the HTML is .hprlink, however, it should be just hprlink. Simply remove the period as it is used in CSS selectors to target classes rather than defining them.

Furthermore, consider implementing JQuery's slideUp function to conceal the infoDiv:

Check out this working example on Fiddle

Answer №2

http://jsfiddle.net/e62Wu/14/

If you simply relocate the infoDiv into the header div, it should resolve the issue.

<div class="header">
    <h3>
        <span class="glyphicon glyphicon-user"></span><span style="margin-left:5px;">test</span>
    </h3>
    <div id='infoDiv' class='alert alert-info alert-dismissable'>
    <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
    just an information message.............
    </div>
</div>

I've made corrections to all instances of 

  <a href="#" class="hprlink">add</a>

To ensure your fiddle functions properly. The period before the class name shouldn't be there.

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

Unable to activate slideToggle due to malfunctioning links

When using the slideToggle function, I encountered an issue where the links are not functioning properly. Check out my demo site at the following link: Here is my script: $(".nav li > a").click(function(e) { $(this).parent().siblings().find(&a ...

javascriptjqueryhtml

The appearance of the logout button may differ depending on the web browser being used

I have implemented a straightforward logout button using the following code: <li><a href="http://localhost:8666/web1/profile/mainpage/logout.php" onclick="return confirm('Are you sure to logout?');">Log Out</a>&l ...

javascriptphpjqueryhtmlcss

jQuery Expander and Bulleted Lists

Recently, I decided to test out the jQuery expander plugin that I discovered here. While it works well with regular text, I noticed some odd behavior when the slice point falls in the middle of an <LI> tag. Are there any helpful tips or suggestions ...

c#jqueryexpanderhtml-lists

Numerous instances of utilizing the identification feature to trigger the opening of a popup dialogue

After following this tutorial, I was able to create a pop-up box with a contact form. However, I am looking for a way to reuse this code in multiple locations without having to change the IDs for each button. If anyone has any advice on how to achieve thi ...

javascriptjquerycsspopup

The event listener for jQuery's document.ready doesn't trigger, rendering all jQuery functions ineffective

After researching similar issues on various forums, I have attempted the following troubleshooting steps: replacing all $ with jQuery ensuring the correct src is used implementing jQuery.noConflict() My goal is to retrieve data from a SQLite3 database w ...

javascriptjqueryhtmlajax

Is it possible to utilize JQuery $.post for file uploads?

Similar Inquiry: How can files be uploaded asynchronously using jQuery? jQuery Ajax File Upload I typically use $.post to send form data to a php page for database insertion. However, I am wondering if this same method can be used to upload files, ...

phpjqueryajax.post

The file you are trying to import, bootstrap-sass, cannot be located or is unreadable

Experimenting with Django Shop and following a tutorial that can be found here: (stable version). After starting the server and navigating to localhost, the following error message is displayed: Error: File to import not found or unreadable: bootstrap-s ...

cssdjangobootstrap-4django-shop

Angular is unable to iterate through a collection of ElementRef instances

My list of ElementRef contains all my inputs, but adding listeners to them seems to indicate that textInputs is empty even though it's not. @ViewChildren('text_input') textInputs!: QueryList<ElementRef>; ngAfterViewInit(): void { ...

htmlangulartypescriptelementref

Troubleshooting the lack of functionality with justify-items in CSS Grid

I'm facing an issue with my CSS Grid. I am attempting to set the justify-items property to start. Despite referencing the specification and watching a tutorial where it works, the property (and related ones) are not functioning as expected. In my tex ...

htmlcsscss-grid

Incorporate a style sheet for a colorful navigation bar

I'm looking to add a colored bar below my navigation menu but I'm unsure of the correct method to do so. What I need: EDIT: I also need guidance on how to position the navigation menu at 50% of the height of the logo. Currently, I have used a & ...

htmlcssnavigation

How to Resolve File Paths in CSS Using Angular 7 CLI

My assets folder contains an image named toolbar-bg.svg, and I am attempting to use it as the background image for an element. When I use background: url('assets/toolbar-bg.svg'), the build fails because postcss is unable to resolve the file. How ...

cssangularsasscommand-line-interfaceassets

Utilizing Javascript to implement the Onchange event on form fields in a Reactjs page

Seeking a solution to track field changes on a form created with Reactjs using custom javascript code that can be embedded on the page. While I am familiar with using the .change event from jQuery to monitor field value changes on non-react pages, I am un ...

javascriptjqueryhtmlreactjs

JavaScript - Clear the localStorage when closing the final tab of a website

Currently, I am working with AngularJS and utilizing $window.localStorage to store the username of a logged-in user. Since localStorage needs to be explicitly deleted, I have implemented an event listener for $(window).on('unload', function(){}) ...

javascriptjqueryangularjshtmltabs

Attempting to display images in various formats using the Picture HTML element

Vue is being used to create a dynamic picture component, resulting in the following code: <picture style="display: contents;"> <source type="image/avif" sizes="700px" src ...

htmlimagevue.jssrcsrcset

Display a modal dialog showcasing the progress while making an ajax request

I am working with an Excel sheet that contains over 30,000 records. My goal is to insert each record into a database and display a modal window with a progress bar showing the percentage of completion along with details such as total number of records, num ...

phpjqueryajaxexcelcodeigniter

Is it possible to remove strings within HTML elements?

{% for term in terms %} <div class="term term-count-{{loop.index}}"> <b>{{ term }}</b>: &nbsp;&nbsp; {{ terms[term] }} &nbsp;&nbsp; </div> {% endfor %} 'terms' is a dictionary w ...

pythonhtmlcssflaskjinja2

Use jQuery to calculate the width of the wrapper and evenly divide it among the div elements inside

Seeking assistance with a dynamic div wrapper containing multiple inner divs. The number of inner divs will vary, requiring a script to determine how many are present and adjust their widths to fit perfectly within the wrapper. <div id="wrapper"> &l ...

jquerycss

Using an HTML form to send a PDF file through Nodemailer

A form with an upload file input needs to allow users to upload their file and send it through the form. Currently, the attached PDF file in the email doesn't contain any data and won't open properly. The nodemailer options are set up as follows ...

htmlnode.jsexpressnodemailer

Set the <img> source to link to a PHP webpage

I store all my images in a secure directory inaccessible to normal users. The filenames are generated randomly, so I want to keep the path and names of the files hidden. Currently, my img element looks like this: <img src="get_image.php?id=1"> This ...

phphtmlmysqlimage

Creating dynamic form fields using AngularJS

I have a form that includes an input field, a checkbox, and two buttons - one for adding a new field and one for deleting a field. I want to remove the add button and instead show the next field when the checkbox is checked. How can I achieve this? angu ...

javascriptjqueryhtmlangularjs