Develop Reference

All toggle open but only when code copy pasted

I am facing a problem with the Jquery toggle option. I copy-pasted the code of the first toggle block to use as a template for the next ones and it worked perfectly on the first page. I personalised 8 blocks that open and close when clicked.
But when I copy-pasted some of those to put them on another page, they are all open by default. The same exact code gives a different outcome.
As suggested in other posts I tried changing the class and ID names, and over write with 'ready-hide' but it still won't make the toggle 'closed' by default.
How could I have the toggable blocks closed when the page opens?
I'm sorry for the gibberish, this is my first try at coding and I could really use a little help!
Thank you
Example of my code that works on one page but not the next one:
<div id="flip1" class="flip">
<span style="cursor:pointer">
<img src="img1"/><b>Title1</b>
</span>
</div>
<div id="panel1" class="panel">
<div class="type1">
<article id="article1">
<h2>Title first article</h2><img src="img"/>bla bla bla</article>
</div>
</div>
<script>
$(document).ready(function(){
$("#panel1").hide();
$("#flip1").click(function(){
$("#panel1").slideToggle("slow");
});
});
</script>
<div id="flip2" class="flip">
<span style="cursor:pointer">
<img src="img2"/><b>title2</b>
</span>
</div>
<div id="panel2" class="panel">
<div class="type2">
<article id="article2">
<h2>Title second article</h2><img src="img"/>Bla Bla bla Bla</article>
</div>
</div>
<script>
$(document).ready(function(){
$("#panel2").hide();
$("#flip2").click(function(){
$("#panel2").slideToggle("slow");
});
});
</script>
Thanks again!

Javascript - load an image before the rest of the page

I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.

You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}

coda slider go direct to specific slide by id

I just edited slider of content using coda slider.
So I have a photo gallery and when I click on any photo it open a page with coda slider. Which image is clicked, that image is the first slider. Clicking on the next, the slider switch to the next photo, but clicking on the previous photo, the slider go back to the beginning and not to the previous photo.
In the gallery, it looks like this:
<div class="one_fourth">
<div class="imgNikon">
<a href="../photos/bw_slider.html#2"><img src="../photos/2.jpg" width="150" height="100" />
<span class="imgFrameNikon"></span></a>
</div>
<h6 style="margin-bottom:20px;"align="center">2<br /><br /></h6>
</div>
<div class="one_fourth">
<div class="imgNikon">
<a href="../photos/bw_slider.html#1"><img src="../photos/1.jpg" width="150" height="100"/>
<span class="imgFrameNikon"></span></a>
</div>
<h6 style="margin-bottom:20px;"align="center">1<br /><br /></h6>
</div>
So, bw_slider.html is the page that contain the coda slider.
Continuation of the link #1 and in the other case #2 is a direct link to specific slide that contain that id.
In the coda slider it look like this with much more slides:
<div id="1">
<h2>1</h2>
<img src="1.jpg" width="600" height="400" />
<div class="photo_gallery">
<p >Some text...</p>
</div>
</div>
<div id="2">
<h2>2</h2>
<img src="2.jpg" width="600" height="400" />
<div class="photo_gallery">
<p >Some text...</p>
</div>
</div>
The js of coda slider is on the link above.
Does anyone have any idea how to avoid a return to the beginning when starting slider from the middle of the slider content.

Need explanation of jQuery code

Can someone please explain the structure of this line of a script for me? Another user on here has written it as part of a function that I know want to edit and change to use elsewhere on my site.
$('#main_content .img-wrapper').empty().append($(this).find('img').clone());
This one takes an image from one div and copies it to another with the class="img-wrapper"
I want to do exactly the same but with text. I tried this
$('#main_content .text-wrapper').empty().append($(this).find('.info').clone());
where ('.info') is the class name of the div I want to copy. Its not working.
I don't fully understand the syntax as this is my first day using javascript. Please can someone explain where I'm going wrong?
This is the HTML - There are four different images and when the user clicks on each of the image I want it to load the same image and associated text in the main content div
<div class="row">
<div class="card-container">
<div class="card">
<div class="back">
<img src="images1.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#cc99cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images2.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#9966cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images3.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#6666cc;"></div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="back">
<img src="images4.png" />
<div class="info" style="display: none;">This is a test for image one</div>
</div>
<div class="front" style="background-color:#3366cc;"></div>
</div>
</div>
This is the main content div
<div id="main_content">
<!-- main content -->
<div class="img-wrapper">
</div>
<div class="text-wrapper">
</div>
</div>

The javascript in question is using jQuery.
$('#main_content .img-wrapper')
returns the element(s) with class 'img-wrapper' inside the element with id 'main_content'
.empty()
empties this element (removes all it's HTML contents)
.append(
inserts the argument (the bit that comes next) into this element
$(this).find('img')
finds all 'img' tags within the element referred to by this (i.e. if this was triggered from a .click() handler then the element that was clicked)
.clone()
clones these elements so that there are two versions - one in their original location and one being inserted into the #main_content img-wrapper element.
);
Do you definitely have a #main_content .text-wrapper element?

Without seeing the html structure, my guess would be the context in which you're trying to find .info is incorrect.
I'm assuming this block of code is within an event handler like a click or mouseover or something. In that case the $(this) is referring to the element that triggered that event. So the following snippet:
$(this).find('.info')
is looking for elements with a classname of info within the element referred to by $(this).
Make sure the context is correct - change $(this) to the element that you need to search within.

Try this:
$('#main_content .text-wrapper').empty().append($(this).find('.info').html());

Sliding panel in the middle of the page. Z-index given not working

I am implementing sliding panel element but problem is when i slide out other div element is floating down.
I guess and tried to give z-index to element which i am sliding but it doesn't seems to work.
Let me put code for both div.
<div class="vrcontrol">
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
This is div which i am sliding in and out and beneath is code of effective div.
<div class="askform">
<p class="titletext">Ask an Expert Trade Forum</p>
<p class="detailtext">WD-40’s leading source for DIY tips and tricks.</p>
<span>
<form id="askform" name="askform" action="" method="post">
<span class="left"><input name="input" type="text" class="askinputbox"/></span><span class="marginleft"><input type="image" src="images/search_icon.gif" /></span>
</form>
</span>
<div class="followus">
<span class="followtext">Follow us on</span><span class="right"><img src="images/bookmark.jpg" width="121" height="45" alt="Bookmark" /></span>
</div>
</div>
Sliding div is in left portion of the page and effective div is in right portion of the page.
I guess something with z-index, positioning element and overflow properties will do something.

For starters, this block of HTML is malformed:
<div class="vrcontrol">
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
Where' the closing </div> for this div?
<div class="slide-out-div">
Also, without the accompanying CSS, it's hard to determine whether that is the problem as well.