Transfer the information of a selected element to a different element

Hello, I am trying to transfer content from a child element to another element.

In my HTML setup, there is a hidden div named "DetailsExpanded" and multiple items called "IconWrapper". When an "IconWrapper" is clicked, I want to copy the content of its "ItemDetail" into "DetailsExpanded" and smoothly reveal it.

Below is the structure of my HTML:

I have started working on the sliding animation in JavaScript, but I'm struggling a bit with it.

$( ".IconWrapper" ).click(function () {
  if ( $( ".DetailsExpanded" ).is( ":hidden" ) ) {
    $( ".DetailsExpanded" ).slideDown( "fast" );
  } else {
    $( ".DetailsExpanded" ).hide();
  }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>

        <div class="IconWrapper">
          <div class="ItemDetail">Content to be copied</div>
          <div class="Icon icon-icons-d-steps"></div>
        </div>

        <div class="IconWrapper">
          <div class="ItemDetail">More content to copy</div>
          <div class="Icon icon-icons-d-steps"></div>
        </div>

        <div class="IconWrapper">
          <div class="ItemDetail">Additional content to copy</div>
          <div class="Icon icon-icons-d-steps"></div>
        </div>

javascriptjqueryhtmlcss

Answer №1

To transfer the .html() from the selected item, simply place it within your .DetailsExpanded section:

$(".IconWrapper").on("click", function() {
    var data = $(this).find(".ItemDetail").html();
    $(".DetailsExpanded").html(data);
    $(".DetailsExpanded").slideToggle("fast"); // this will switch between slideDown and hide
});

Answer №2

$( ".IconWrapper" ).click(function () {
  var text = $(this).find('.ItemDetail').text();
  $( ".DetailsExpanded" ).html(text).slideDown( "slow" );  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>

        <div class="IconWrapper">
          <div class="ItemDetail">Content to copy1</div>
          <div class="Icon icon-icons-d-steps"></div>
        </div>

        <div class="IconWrapper">
          <div class="ItemDetail">Content to copy2</div>
          <div class="Icon icon-icons-d-steps"></div>
        </div>

        <div class="IconWrapper">
          <div class="ItemDetail">Content to copy3</div>
          <div class="Icon icon-icons-d-steps"></div>
        </div>

Does this meet your requirements?

Answer №3

$(document).ready(function(){

   $('.IconWrapper').on('click', function(e) {  
      $(".DetailsExpanded").text($(this).text()).slideDown();
   });
});

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

Determining if a component is nested within itself in Angular 6 is a crucial task

My goal is to develop a custom Angular component for a nested navigation menu with multiple levels. Below is an example of how the menu structure looks: app.component.html <nav-menu> <nav-menu-item>Section 1</nav-menu-item> <nav- ...

javascripthtmlcssangular

ways to utilize inline styling in react using javascript

When repurposing an array of React components, I am looking to modify the inline styles generated with them. How can I access and log the inline styles of a React component? UPDATE: see the code snippet below: const pieces = this.props.pieces.map((decl, ...

javascripthtmlcssreactjs

Exploring AngularJS JSON Parsing Techniques (such as utilizing ng-repeat)

My approach to processing json data looks like this: $scope.activities = response.data; console.log($scope.activities.length); var list = []; for (var i = 0; i < $scope.activities.length; i++) { console.log($scope.activities[i].name); list.pus ...

javascriptangularjsjson

Loading React router on every route page

<BrowserRouter> <div> <Route path={"/"} component={Home} /> <Route path={"/component"} component={AnotherComp} /> <Route path={"*"} component={NotFound} /> </div> </ ...

javascriptreactjsreact-router

ng-disable will only evaluate when the page is initially loaded

I am facing an issue with around 10 textboxes on a form page. The condition I have is as follows: Disable the textboxes if the logged in user does not have permission Disable the textbox if the user has permission, but there is already a value loaded fro ...

jqueryhtmlangularjs

Issue with ng-hide logic malfunctioning

I am currently developing an Ionic application and encountering some issues with the ng-hide directive. My goal is to display or hide a button based on whether the user has completed registration. The button in question: <button class="button button-c ...

javascriptangularjsionic-frameworkng-hide

The issue of selecting multiple classes simultaneously is not being resolved

Here is my JavaScript code snippet: $('.normal-box').click(function(){ //unique row id var id = $(this).data('row-id'); //its index according to the content array var index = $(this).data('index'); //which car ...

javascriptjqueryhtmlcssangularjs

There is no information stored in req.session.passport, and req.user is not defined

I've previously raised a similar issue, but it was under the Javascript category. I now have more specific insights into what might be causing the problem. The main issue is that req.session.passport appears empty in my logs. As I navigate through my ...

javascriptnode.jssessioncookiesexpress

Implementing jQuery AJAX in Rails 3 for enhanced functionality through the use of partial

In my Rails 3 project, I have an index view that displays several line items with their corresponding counts. The list looks like this: Name Count -------------- Item A 10 Item B 278 Item c 64 Although the list length can change dynamical ...

jqueryajaxruby-on-rails-3partial-views

Invoke a PHP function from a class located in a separate file using an HTML button

I have an HTML input form with a SAVE button at the end. I want the SAVE button to trigger a PHP function written in a separate class file. The PHP code at the beginning of the file nabava_vnos.php that contains the HTML form: <?php // Script for sta ...

phphtmlbutton

If the overflow-x property is set to hidden for the html and body elements, the links in the footer will become unclickable as they will

Situation: Consider the following scenario with a simplified HTML example: position the footer behind the content and make it stick to the bottom when reaching the end of the page, the footer should slide up from behind the content I achieved this layo ...

htmlcssz-indexfootersticky-footer

IE does not support Overflow and Ellipsis in this table

FF v14 has the exact appearance I want. Unfortunately, IE9 is not cooperating as it does not hide overflow or display the ellipsis. Does anyone know how to resolve this issue for compatibility with IE9? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

htmlcsscross-browser

What is the best way to retain changes made to a checkbox that is used for email notifications?

Users on my website receive email notifications when someone comments on their profile or blog. To give users control over these notifications, I have created an email settings page with checkboxes that allow them to choose whether or not they want to rece ...

phphtmlcheckboxtoggleonsubmit

Transform JSON-serialized string with HTML entities into an object

Looking for a solution to convert the following string into an object using Javascript: "[&quot;Software&quot;,&quot;3rd Party&quot;]" While I know how to convert HTML Entities to DOM Objects with this code: $("<div/>").html(encode ...

javascriptjqueryjson

What is the best way to assign a unique number to every div id that is generated?

I am currently using a django for loop to retrieve data from a query set. As the information is displayed, I would like to have each item wrapped in a div tag with a unique id that increments by 1 for every instance. Is there a way to achieve this directly ...

javascriptjquerypythondjango

The callback for AJAX was unsuccessful

Using ajax to update form data in the database, a success response is expected but it's not functioning as intended. html <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> ...

javascriptphpjqueryajaxhtml

Using Jquery toggle to keep divs always open or automatically open them at the start

After implementing the script below, I have successfully created a toggle effect for opening and closing divs. <script type="text/javascript" src="/mainmenu/js/jquery.min.4.1.2.js"></script> <script type="text/javascript"> jQuery(documen ...

togglejquery

To retrieve a CSV file on the frontend, simply click a button in an AngularJS application that communicates with NodeJS and ExpressJS

How can I download a .csv file from the frontend? This is the code I am currently using: $http.get('/entity/consultations/_/registerationReport' ) .success(function (data) { myWindow = window.open('../entity/consultations/_/r ...

javascriptnode.jsangularjsmongodbexpress

Clicking the React Todo Delete Button instantly clears out all tasks on the list

I am dealing with 2 files: App.js import React, { Component } from 'react'; import './App.css'; import ToDo from './components/ToDo.js'; class App extends Component { constru ...

javascriptreactjs

Preserve selected option in select box after page refresh in JSP

I'm working on a jsp page that contains a simple select html element. Right now, when I select an option and click the Wyswietl button, the page refreshes, the table data is refreshed, but the selected option resets to default... How can I make it sta ...

javascriptjqueryhtmljsp