Load internal div after clicking button Wordpress

Question

I need to load div after clicking on button, not OnPageLoad.

I said LOAD div after Clicking button, i'm not talking about SHOW div.

I don't want load div on page load.

I have some codes working but how to do in wordpress

<div id="container">
   <input id="btn" type="button" value="Load Div"/>
</div>

Jquery

$('#btn').click(function ()
{
  var imgDiv = document.createElement('div');
  $(imgDiv ).addClass('content');
  $(imgDiv).append('<img id="dynamicImg" src="http://3.bp.blogspot.com/-mfPKqN-LLk8/UYJ_TQoUEKI/AAAAAAAAACA/TtEuqxVltMQ/s320/cms.jpg" height=40px />')
  // add the imgDiv to your parent container element. 
  // for e.g. 
  $("#container").append(imgDiv)
});

http://jsfiddle.net/QB8Hv/19/

This is working fine this is what i need. The problem is I can not import this code in my single.php . like ' click to button show embed or jpg ' but don't load post before clicked .

I'm using colormag theme this is my single.php. can anyone help me?

<?php do_action( 'colormag_before_body_content' ); ?>

    <div id="primary">    
        <div id="content" class="clearfix">
            <?php while ( have_posts() ) : the_post(); ?>    
                <?php get_template_part( 'content', 'single' ); ?>    
            <?php endwhile; ?>    
        </div><!-- #content -->    
      <?php get_template_part( 'navigation', 'single' ); ?>

      <?php if ( get_the_author_meta( 'description' ) ) : ?>
         <div class="author-box">
            <div class="author-img"><?php echo get_avatar( get_the_author_meta( 'user_email' ), '100' ); ?></div>
               <h4 class="author-name"><?php the_author_meta( 'display_name' ); ?></h4>
               <p class="author-description"><?php the_author_meta( 'description' ); ?></p>
         </div>
      <?php endif; ?>

      <?php if ( get_theme_mod( 'colormag_related_posts_activate', 0 ) == 1 )
         get_template_part( 'inc/related-posts' );
      ?>

      <?php
         do_action( 'colormag_before_comments_template' );
         // If comments are open or we have at least one comment, load up the comment template
         if ( comments_open() || '0' != get_comments_number() )
            comments_template();
         do_action ( 'colormag_after_comments_template' );
      ?>

    </div><!-- #primary -->

    <?php colormag_sidebar_select(); ?>

    <?php do_action( 'colormag_after_body_content' ); ?>

<?php get_footer(); ?>

Also Content-Single php

<?php
/**
 * The template used for displaying page content in page.php
 *
 * @package ThemeGrill
 * @subpackage ColorMag
 * @since ColorMag 1.0
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php do_action( 'colormag_before_post_content' ); ?>

   <?php
      $image_popup_id = get_post_thumbnail_id();
      $image_popup_url = wp_get_attachment_url( $image_popup_id );
   ?>

   <?php if ( has_post_thumbnail() ) { ?>
      <div class="featured-image">
      <?php if (get_theme_mod('colormag_featured_image_popup', 0) == 1) { ?>
         <a href="<?php echo $image_popup_url; ?>" class="image-popup"><?php the_post_thumbnail( 'colormag-featured-image' ); ?></a>
      <?php } else { ?>
         <?php the_post_thumbnail( 'colormag-featured-image' ); ?>
      <?php } ?>
      </div>
   <?php } ?>

   <div class="article-content clearfix">

   <?php if( get_post_format() ) { get_template_part( 'inc/post-formats' ); } ?>

   <?php colormag_colored_category(); ?>

      <header class="entry-header">
        <h1 class="entry-title">
            <?php the_title(); ?>
        </h1>
    </header>

    <?php colormag_entry_meta(); ?>

    <div class="entry-content clearfix">
        <?php
            the_content();

            wp_link_pages( array(
                'before'            => '<div style="clear: both;"></div><div class="pagination clearfix">'.__( 'Pages:', 'colormag' ),
                'after'             => '</div>',
                'link_before'       => '<span>',
                'link_after'        => '</span>'
          ) );
        ?>
    </div>

   </div>

    <?php do_action( 'colormag_after_post_content' ); ?>
</article>

Answer 1

You need to make ajax call properly.

HTML Open

            <input class="modal-state" id="modal-1" type="checkbox" />
            <div class="modal">
              <label class="modal__bg" for="modal-1"></label>
              <div class="modal__inner">
                <label class="modal__close" for="modal-1"></label>
                <h2>Get HTML Content from URL</h2>
                <div id="dynamic" class="hidden"></div>
              </div>
            </div>

JAVASCRIPT `$(".prooptions").click(loadDynamic);

            function loadDynamic() {  
                $("#dynamic")  
                .load("https://dl.dropboxusercontent.com/s/6ro896byol223p0/ajax-data.txt?dl=1&token_hash=AAEhOzpJgzb71h8X_olqovBCKz0GF2BCXJogeZ0RIoWXoQ", // URL with only <div> content & dont load <head> or <html> or <body> etc...     
                        // Callback function on completion (optional)  
                        function (content) {  
                            // make content visible with effect  
                            $(this).hide().fadeIn("slow");  
                            return false;  
                        });  
            } `

CSS
`/* [Object] Modal * =============================== */

             .btn {
              cursor: pointer;
              background: #27ae60;
              display: inline-block;
              padding: .5em 1em;
              color: #fff;
              border-radius: 3px;
            }

            .btn:hover,
            .btn:focus {
              background: #2ecc71;
            }

            .btn:active {
              background: #27ae60;
              box-shadow: 0 1px 2px rgba(0,0,0, .2) inset;
            }

            .btn--blue {
              background: #2980b9;
            }

            .btn--blue:hover,
            .btn--blue:focus {
              background: #3498db;
            }

            .btn--blue:active {
              background: #2980b9;
            }



            .modal {
              opacity: 0;
              visibility: hidden;
              position: fixed;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              text-align: left;
              background: rgba(0,0,0, .9);
              transition: opacity .25s ease;
              z-index:99999999999999999999999999999999999999999999999999999999999999999999999999999;
            }

            .modal__bg {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              cursor: pointer;
            }

            .modal-state {
              display: none;
            }

            .modal-state:checked + .modal {
              opacity: 1;
              visibility: visible;
            }

            .modal-state:checked + .modal .modal__inner {
              top: 0;
            }

            .modal__inner {
              transition: top 1.25s ease;
              position: absolute;
              top: -20%;
              right: 0;
              bottom: 0;
              left: 0;
              width: 50%;
              margin: auto;
              overflow: auto;
              background: #fff;
              border-radius: 5px;
              padding: 1em 2em;
              height: 50%;
            }

            .modal__close {
              position: absolute;
              right: 1em;
              top: 1em;
              width: 1.1em;
              height: 1.1em;
              cursor: pointer;
            }

            .modal__close:after,
            .modal__close:before {
              content: '';
              position: absolute;
              width: 2px;
              height: 1.5em;
              background: #ccc;
              display: block;
              transform: rotate(45deg);
              left: 50%;
              margin: -3px 0 0 -1px;
              top: 0;
            }

            .modal__close:hover:after,
            .modal__close:hover:before {
              background: #aaa;
            }

            .modal__close:before {
              transform: rotate(-45deg);
            }

            @media screen and (max-width: 768px) {

              .modal__inner {
                width: 90%;
                height: 90%;
                box-sizing: border-box;
              }
            }

            .hidden {
                display: none;
            }
            `

This could make it easy. Good for you?

About i have some codes working, how to do in wordpress.... Wordpress is normal, it s just a bunch of php files :)