No, leave it where it was and instead wrap that scripting code with the jQuery wrapper.
I have this… but it doesn’t work.
<script type=“text/javascript” src=“https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js”></script>
<script type=“text/javascript”>
function initSlickbox(content, toggler) {
// hides the slickbox as soon as the DOM is ready
$(content).hide();
// toggles the slickbox on clicking the noted link
$(toggler).click(function() {
$(content).slideToggle(‘normal’);
if ($(this).html() === 'Hide Details') {
$(this).html('More Details');
} else {
$(this).html('Hide Details');
}
return false;
});
}
initSlickbox(‘#myContent’, ‘#slick-toggle’);
initSlickbox(‘#myContent1’, ‘#slick-toggle1’);
</script>
I’m at a loss. I have tried placing
<script type=“text/javascript”>
after
function initSlickbox(content, toggler) {
and then closing the script before
});
}
But I’m unsure what you mean again by placing it in the wrapper. Sorry.
There are some different types of them that we went through in post #7
Here is one of them, again.
$(document).ready(function () {
...
});
$(function() {
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
function initSlickbox(content, toggler) {
// hides the slickbox as soon as the DOM is ready
$(content).hide();
// toggles the slickbox on clicking the noted link
$(toggler).click(function() {
$(content).slideToggle('normal');
if ($(this).html() === 'Hide Details') {
$(this).html('More Details');
} else {
$(this).html('Hide Details');
}
return false;
});
}
</script>
initSlickbox('#myContent', '#slick-toggle');
initSlickbox('#myContent1', '#slick-toggle1');
</script>
});
I’m not sure where to start and end the wrap as I don’t understand the coding language }); etc… 
I have tried putting it other places and get syntax errors in Dreamweaver on line with }); or </head>
And I just see this written at the top of my page as text…
initSlickbox(‘#myContent’, ‘#slick-toggle’);
initSlickbox(‘#myContent1’, ‘#slick-toggle1’);
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function initSlickbox(content, toggler) {
// hides the slickbox as soon as the DOM is ready
$(content).hide();
// toggles the slickbox on clicking the noted link
$(toggler).click(function() {
$(content).slideToggle('normal');
if ($(this).html() === 'Hide Details') {
$(this).html('More Details');
} else {
$(this).html('Hide Details');
}
return false;
});
}
</script>
initSlickbox('#myContent', '#slick-toggle');
initSlickbox('#myContent1', '#slick-toggle1');
</script>
Maybe I’m missing something, but after seeing the markup, why not refactor the js to take advantage of the structure instead? Only minor modifications are needed and the resulting js is MUCH easier to digest for someone who is just starting to dip their toes in the js pool. 
Add a class to your anchor links called “slick-toggle” and another class to your content divs “toggle_content”, then the below jquery should do everything you’re wanting.
$('.slick-toggle').click(function() {
$(this).next('.toggle_content').slideToggle('fast');
if ($(this).html() === 'Hide Details') {
$(this).html('More Details');
} else {
$(this).html('Hide Details');
}
});
I have no idea what you’re talking about, sorry, as this is the very first time using such a coding language and I’m really struggling to understand what’s going on. I just need to wrap the above code correctly in the jQuery wrapper so it all works. I’m in a rush to get this fixed so I can update my online store and start to sell products. I’ve been coding my website since January trying to fix issues with flash and scrolling not working on mobile devices and such… it’s a nightmare when you know nothing.
This is the last bit I need to fix then I can crack on with the rest.
Thanks in advance
I have moved the initSlickbox inside the function and no longer see that at the top of my page as text, so that’s good. I hope, though think you said to leave them out?
The show/hide and name change still doesn’t work however, so I’m stuck at the mo and really need the help.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function initSlickbox(content, toggler) {
// hides the slickbox as soon as the DOM is ready
$(content).hide();
// toggles the slickbox on clicking the noted link
$(toggler).click(function() {
$(content).slideToggle('normal');
if ($(this).html() === 'Hide Details') {
$(this).html('More Details');
} else {
$(this).html('Hide Details');
}
return false;
});
initSlickbox('#myContent', '#slick-toggle');
initSlickbox('#myContent1', '#slick-toggle1');
}
</script>
</script>
With a little tweaking and cursing at the screen and my lack of knowledge I have fixed it 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function initSlickbox(content, toggler) {
// hides the slickbox as soon as the DOM is ready
$(content).hide();
// toggles the slickbox on clicking the noted link
$(toggler).click(function() {
$(content).slideToggle('normal');
if ($(this).html() === 'Hide Details') {
$(this).html('More Details');
} else {
$(this).html('Hide Details');
}
return false;
});
}
initSlickbox('#myContent', '#slick-toggle');
initSlickbox('#myContent1', '#slick-toggle1');
});
</script>
</script>
Please can I get some feedback on what I was doing wrong so to learn for future.
Thanks ever so much for your comments and help
Hi all,
Is there some code I can add to the <head> to hide all the div’s on load? As currently the text is visible as the page loads, then disappears when it’s finished.
Thanks
Please
One way is to put a class name on each of the content sections for the slick toggle, perhaps called something like “slick-content” so that you can then use a CSS declaration to set their display to none. That way the page loads without them being visible, but the downside is that those who don’t run javascript won’t be able to see any of that content.
Hi Paul,
Please can you kindly show me how to do that in full (I’m in a rush to get this site up to sell my products), and explain why users wouldn’t be running Javascript. I would have thought everyone would be by default for their browsers.
Cheers
Here is what your existing div currently looks like:
<div id="myContent" style="background-color: #CCC; padding: 10px;">
...
</div>
Using inline styles is considered to be “bad form”, so let’s include the inline style as a part of a consistent class for the content areas.
.slick-content {
background-color: #CCC;
padding: 10px;
}
Now that CSS style can be applied to the content div like this:
<div id="myContent" class="slick-content">
...
</div>
You can also now make use of the class name on each of the content sections with the following type of jQuery selector:
$('.slick-content')
There are many situations where scripting won’t be available for the web page visitor.
[list]
[]Sometimes people choose to deliberately disable javascript as one of the more extreme security measures that can be taken.
[]Other times it’s disabled by the IT staff at the business that someone works at.
[]There are many mobile devices that don’t support javascript.
[]Then there are the search engine spiders to think about. Many of them don’t support javascript either, so what the search engine sees of your page is only what is visible without scripting.[/list]
You don’t need to do anything about those problems. But they are useful to be aware of in case you receive any comments or complaints about the situation.
Thanks for the detailed info, I’ll look into editing the code today and see if I render any issues.
Under the CSS I just need to thus add a display property of “none” for the class? And, the jQuery selector will allow me to add such functions…???
Cheers
Edit; If JS is disabled, could I add an IF argument to the code stating “if JS is disabled on browser or mobile device, unhide div’s”?
Nope, that’s not possible. About the next-best solution that it possible is for scripting to hide those areas when the page first loads, which seems to be the solution that you had before.
Cool. Thanks again for the help, it’s been dearly appreciated Paul