Birdhouse Websites and Designs

Moving Your Business ONLINE?

Contact Us Today!

The Goal:
To copy the content of a div and clone it to another div container.

Sometimes you’ll use a plugin that dynamically creates content in places you might not want it. This tutorial will let you clone that content to a new location, then remove the original so you don’t have duplicates.

Requirements:

  • HTML & CSS
  • jQuery

Original Post

Before

After

Content is appended to the inside of an accordion body and now only visible if the accordion is opened.

HTML

Add this to your html document or page.

Copy From:

<div class="simplefilter">Filter 1</div>
<div class="simplefilter">Filter 2</div>
<div class="simplefilter">Filter 3</div>

Copy To:

<div class="filtering-wrap"></div>

jQuery

Add this to your custom scripts. Make sure you have jQuery installed.

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

    /* Clone and Append Filters to Accordion Dropdown */
    var $filters = $('.simplefilter');
 
    $filters.clone().appendTo('.filtering-wrap');
    $filters.remove();
   
    // Change the text to the filter that is selected
    $('.simplefilter li').on('change', function (e){
        $('.current-selection').text($(this).val());
    });
});

Alternatively if you are going to just remove the element you cloned, you can just move the element in general

jQuery(document).ready(function($) {
  $('.simplefilter').appendTo('.filtering-wrap');
});