Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Richard Scott
Richard Scott
25,647 Points

Cloning div contents with Jquery

Hi All! I have the following two functions - the first swaps a div on my main page with another div, and the #return function essentially undoes the changes and returns the user to where they started. The functionality works as expected, the issue I'm having however, is that if the first function is run for a second time, nothing happens. I suspect it's to do with the placing of the variable mainClone but I can't seem to get it to work! any help would be appreciated :)

//JS Code

$(document).ready(function() {

$('#trigger_adults').click(function() {
    var mainClone = $("#main-content").clone();

    $('#main-content').fadeOut('fast', function() {
        $('#main-content').replaceWith($('#adults'));
        $('#slider-sec').slideUp('slow');
        $('#adults').fadeIn('fast');
        $(window).scrollTop(0);
    });

    $('#return').click(function() {

        $("#adults").replaceWith(mainClone.clone());
        $('#adults').fadeOut('fast');
        $('#slider-sec').slideDown('slow');
        $(window).scrollTop($('#main-content').offset().top)
      });
  });
});

HTML Code

 <div class="container" id="main-content">
         <div class="row intro-row">
         <div class="col-md-12 text-center wow animated fadeInUp">
          <h2>Click an Icon below to get started</h2>

    </div>
    <div class="space-70"></div>
    <div class=" col-sm-4">
        <div class="services-box">
            <a href="#" id="trigger_adults"><i class="ion-ios-gear"></i></a>
            <h1>Adults Reports - </h1>
            <p>
                there's plenty of room to write a quick note about what kind of reports are available? or whatever else pertinant info?
            </p>
        </div>
    </div>
    <!--main tile box-->
    <div class=" col-sm-4">
        <div class="services-box">
            <i class="ion-arrow-graph-up-right"></i>
            <h1>Adults Dashboards</h1>
            <p>
                Redirects you to Power BI.com
            </p>
        </div>
    </div>
    <!--main tile box-->
    <div class="col-sm-4">
        <div class="services-box">
            <i class="ion-ios-gear"></i>
            <h1>Childrens Reports</h1>
            <p>
                there's plenty of room to write a quick note about what kind of reports are available? or whatever else pertinent info?
            </p>
        </div>
    </div>
    <!--main tile box-->
</div>
<!--row end-->
</div>
<!--intro with main tile end-->


<div class="container" id="adults" style="display:none;">
<div class="row">
    <div class="col-lg-11">
        <h3 class="heading-sec">Adults Reports</h3>

    </div>
    <div class="col-lg-1">
        <p class="slide-btn" style="float:right; margin-top: 0px">
            <a href="#" id="return" class="btn btn-dark btn-lg">Go Back</a>
        </p>
    </div>
</div>
<!--row-->
<div class="row">

    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-ios-compose"></i>
            <h1>Assessments & Reviews</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>


    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-ios-people"></i>
            <h1>Carers</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>

    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-bug"></i>
            <h1>Data Quality</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>

    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-sad"></i>
            <h1>DOLS</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>

    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-cash"></i>
            <h1>Finance</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>

    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-lock-combination"></i>
            <h1>MASH</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>
    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-android-walk"></i>
            <h1>Reablement</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>
    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-locked"></i>
            <h1>Safeguarding</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>
    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-person"></i>
            <h1>Services</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>
    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-model-s"></i>
            <h1>Transport</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>
    <!-- / Adults Directory Categories-->
Ashley Carpenter
Ashley Carpenter
13,393 Points

Hi Richard!

Could you please also include your HTML code?

Thanks

Ashley Carpenter
Ashley Carpenter
13,393 Points

Hi Richard,

From a quick scan it looks like it's the replaceWith() function you're using after you click return. This will remove will remove the #adults content and return it. See below:

http://api.jquery.com/replacewith/

This will mean that the #adults content no longer exists. Perhaps when you use replaceWith(), try storing the #adults html code in a variable or use a different method to hide it instead of replacing it.

Richard Scott
Richard Scott
25,647 Points

Hi Ashley.

That makes sense! thanks, I'll have a look to see what I can change replacewith with :)

Thanks for you help!

Ashley Carpenter
Ashley Carpenter
13,393 Points

Great, let me know how it goes.

I think that your function does actually work the second time, but I think that both of your content blocks are the same because of the replace function.

Ashley Carpenter
Ashley Carpenter
13,393 Points

Hi Richard, I was wondering if the solution I gave helped you at all?

If it did, would you be so kind as to mark mine as best answer? I'd really appreciate it.

Thanks Ashley