JavaScript Insert html with toggle

Question

I have a div which contains a lot of big sized images, and with JavaScript I'm trying to insert this HTML in another div with toggle

Please run the code snippet

$(".toggleimages").on("click", function(e) {
    e.preventDefault();


    var sele = document.querySelector(".bgcontainer");
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>'
    sele.insertAdjacentHTML('beforeend', colocontainer)

    $(".bgcontainer").slideToggle();
});

li{
    list-style-type: none;
    font-size: 35px;
    cursor: pointer;
}
span{
    display: inline-block;
    width: 200px;
    height: 140px;
    background-size: cover;
}
.bgcontainer{
	display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li>

<div class="bgcontainer"></div>

My problem is that the div renders each time you toggle the button
How can I prevent the HTML from inserting twice? Or insert and remove on toggle?

Why insert on toggle?: The div is hidden by default, and this is used only IF i wanted to select some background images, So i find it really bad for page speed if all of this big images to render everytime you load the page, instead with javascript I want to insert the html on toggle.

on click, before update the html.... sele.insertAdjacentHTML('beforeend', '') insert the emty html.. so every time your fresh html append... — Binary Brackets
– Binary Brackets, Commented Jun 21, 2017 at 8:56

Prashant Shirke · Accepted Answer · 2017-06-21 09:20:02Z

2

You can set the html before and on click can just do toggle rather setting html each time.

var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>'
    $(".bgcontainer").html(colocontainer);

$(".toggleimages").on("click", function(e) {
    e.preventDefault(); 

    $(".bgcontainer").slideToggle();
});

li{
    list-style-type: none;
    font-size: 35px;
    cursor: pointer;
}
span{
    display: inline-block;
    width: 200px;
    height: 140px;
    background-size: cover;
}
.bgcontainer{
	display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li>

<div class="bgcontainer"></div>

If you want to load image on click only then just move $(".bgcontainer").html(colocontainer); line in click after e.preventDefault()

edited Jun 21, 2017 at 9:20

answered Jun 21, 2017 at 8:57

Prashant Shirke

1,4231 gold badge8 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nippledisaster Over a year ago

Sorry, I need the HTML to insert on toggle only and not every time someone loads my website, this is bad for page speed, I explained in post why, Thank you. :)

ZeroBased_IX · Accepted Answer · 2017-06-21 08:56:06Z

You just need to clear down the HTML first with: $(sele).html("");

$(".toggleimages").on("click", function(e) {
    e.preventDefault();


    var sele = document.querySelector(".bgcontainer");
    $(sele).html("");
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>'
    sele.insertAdjacentHTML('beforeend', colocontainer)

    $(".bgcontainer").slideToggle();
});

li{
    list-style-type: none;
    font-size: 35px;
    cursor: pointer;
}
span{
    display: inline-block;
    width: 200px;
    height: 140px;
    background-size: cover;
}
.bgcontainer{
	display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li>

<div class="bgcontainer"></div>

Super User · Accepted Answer · 2017-06-21 08:57:07Z

You can simply check .container using length. Check updated snippet for this.

$(".toggleimages").on("click", function(e) {
    e.preventDefault();
    if(!$(".bgcontainer .container").length){

    var sele = document.querySelector(".bgcontainer");
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>'
    sele.insertAdjacentHTML('beforeend', colocontainer)
}
    $(".bgcontainer").slideToggle();
});

li{
    list-style-type: none;
    font-size: 35px;
    cursor: pointer;
}
span{
    display: inline-block;
    width: 200px;
    height: 140px;
    background-size: cover;
}
.bgcontainer{
	display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li>

<div class="bgcontainer"></div>

or you can empty old .container div

$(".toggleimages").on("click", function(e) {
    e.preventDefault();
   
$(".bgcontainer").empty();
    var sele = document.querySelector(".bgcontainer");
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>'
    sele.insertAdjacentHTML('beforeend', colocontainer)

    $(".bgcontainer").slideToggle();
});

li{
    list-style-type: none;
    font-size: 35px;
    cursor: pointer;
}
span{
    display: inline-block;
    width: 200px;
    height: 140px;
    background-size: cover;
}
.bgcontainer{
	display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li>

<div class="bgcontainer"></div>

Haroon · Accepted Answer · 2017-06-21 09:02:38Z

You can check whether the '.container' div is already present in the div '.bgcontainer' and insert if not present. Please find the modified code snippet below

$(".toggleimages").on("click", function(e) {
    e.preventDefault();
    

    var sele = document.querySelector(".bgcontainer");
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>'
    if(document.getElementsByClassName('container') && document.getElementsByClassName('container').length ==0)
    sele.insertAdjacentHTML('beforeend', colocontainer)

    $(".bgcontainer").slideToggle();
});

li{
    list-style-type: none;
    font-size: 35px;
    cursor: pointer;
}
span{
    display: inline-block;
    width: 200px;
    height: 140px;
    background-size: cover;
}
.bgcontainer{
	display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li>

<div class="bgcontainer"></div>

Jai · Accepted Answer · 2017-06-21 08:55:43Z

You can .empty() it before insertion:

$(".toggleimages").on("click", function(e) {
    e.preventDefault();

    var sele = document.querySelector(".bgcontainer");
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>';

    $(sele).empty();
    sele.insertAdjacentHTML('beforeend', colocontainer);
    $(sele).slideToggle();
});

Mihai T · Accepted Answer · 2017-06-21 08:57:44Z

0

Why don't you load the content before the click function, and then inside the click function only toggle the visibility of that content ? This way the content will be loaded only once, not every time you click

    	    var sele = document.querySelector(".bgcontainer");
    	    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>'
    	    sele.insertAdjacentHTML('beforeend', colocontainer)

    	    $(".toggleimages").on("click", function(e) {
    	      e.preventDefault();





    	      $(".bgcontainer").slideToggle();
    	    });

li {
  list-style-type: none;
  font-size: 35px;
  cursor: pointer;
}

span {
  display: inline-block;
  width: 200px;
  height: 140px;
  background-size: cover;
}

.bgcontainer {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i>x</li>

<div class="bgcontainer"></div>

answered Jun 21, 2017 at 8:57

Mihai T

17.8k2 gold badges26 silver badges35 bronze badges

1 Comment

Nippledisaster Over a year ago

No, because i don't need the images to load every time the page loads, I added some more info to explain in my post, Thank you :)

Collectives™ on Stack Overflow

JavaScript Insert html with toggle

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related