Develop Reference

jquery dialog not appearing on click

I have a span that I want to create a jquery dialog on when it is clicked.
I have included this in the header:
<script type="text/javascript">
$(document).ready(function () {
$('#quote_dialog').click(function () {
$('#quote_dialog_open').dialog('open');
return false;
});
});
</script>
The following is the span (havent included content):
<span id="quote_dialog">
content
</span>
And the div is just a box on the screen:
<div id="quote_dialog_open">
content
</div>
I assume I need to hide the div using CSS? Will jQuery make it popup as opposed to just appearing?
Nothing is happening at present when the span is clicked.

Firstly, Make sure you are also including the relevant jquery UI...
Secondly, look at this fiddle, it shows you the solution.
$(document).ready(function () {
// next add the onclick handler
$("#quote_dialog").click(function() {
$("#dialog").dialog();
return false;
});
});
http://jsfiddle.net/k0nzhtLw/
Hope it helps :)

wild guess, your problem is the typo, change
$('#quote_dialog_oepn').dialog('open');
to
$('#quote_dialog_open').dialog('open');

Element not hidden on page load

I have the below Javascript code, using jQuery:
$(document).ready(function () {
$('#answer').hide(); //hiding the element
$('#questionOne').click(function () {
$('#answer').show();
However, the element does not get hidden on load. My HTML is this:
<p id="answer">All requests of this nature are required to be submitted via our website www.mufoundation.org/charityrequests. Due to the volume of requests we receive, we require at least 6 weeks notice prior to your event. If your event does not fall within this timescale unfortunately, we will not be able to help.</p>
I cannot seem to hide the paragraph answer element. How can I do this?

If you are always going to be hiding it on load would it not be better practice to not hide it on load and rather attach a CSS class that sets it to hidden? It's extremely simple to do just change your code to do this.
Create a CSS Class called hide
.hide{
display : none;
}
Add the class below.
<p id="answer" class="hide">All requests of this nature are required to be submitted via our website www.mufoundation.org/charityrequests. Due to the volume of requests we receive, we require at least 6 weeks notice prior to your event. If your event does not fall within this timescale unfortunately, we will not be able to help.</p>

If this is literally all the jQuery you have then you have forgotten to add }); }); at the end of the script. So your code should look like this;
$(document).ready(function () {
$('#answer').hide();
$('#questionOne').click(function () {
$('#answer').show();
});
});
if that doesn't fix your problem, are you sure you're including the appropriate jQuery library?

If you posted the right code, then it's the wrong syntax.
Right code
$(document).ready(function () {
$('#answer').hide(); //hiding the element
$('#questionOne').click(function () {
$('#answer').show();
}); });<-- you forgot the clossing brackets
I hope it was that! Let me know if it works.

Create a css class to hide the stuff instead of doing it in onload:
HTML:
<p class="hide">zyz</p>
CSS:
.hide {
display: none;
}
And then, use the following to show it using jquery:
$(document).ready(function () {
$('#questionOne').click(function () {
$('#answer').show();
});
});

Login slider with jQuery issues

I want to make a login slider with jQuery. You will have a div at the top of your page with a plus image. I want the plus image to be changed into a minus image and the div will slide down. Here is my code but there is a problem.
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("form").hide();
$(".open").click(function() {
$("form").slideDown("slow");
$(".open").addClass("close");
$(".close").removeClass("open");
$(".close").click(function() {
$("form").slideUp("slow");
$(".close").addClass("open");
$(".open").removeClass("close");
});
});
});
</script>
It works once but if you want to slide it down for the second theme it doesn't work anymore.. Can somebody help my please?
tnx!

Working JSFiddle
Try something different like the following:
$('.open').click(function () {
$('form').slideToggle('slow', function () {
$('.open').toggleClass('form-is-open');
});
});
jQuery offers some toggle functions which supply the desired behaviour. This way you don't need two click handlers or keep track of classes yourself. The above code simply adds a class ('form-is-open') to the button, when the form is shown and removes it, when it is hidden.

jQuery shows hidden content on refresh

I use this fancy little jQuery toggle on my site, works great. But now I have a little larger text area I want to hide, and therefore I've included it in another php file, but when the site opens\refreshes the content is briefly shown and then hidden? Have I done something wrong or does it simply not work right with includes in it ?
Show me?
<div class="content">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
var par = jQuery('.content');
jQuery(par).hide();
});
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>

Use css to hide it
.content{
display:none;
}
Also
var par = jQuery('.content');
is a jQuery object so don't need to wrap it again as
jQuery(par).hide();
Just use par.hide(); but in this case, when you will use css to hide the element, then you don't need this anymore.

That will happen. The document briefly shows all the HTML before executing the code in your ready handler. (It has nothing to do with the PHP include.) If you want an element hidden when the page loads, hide it using CSS.
#myElement {
display: none;
}
The toggle should still work correctly.

You just need to don't use jquery document ready function. just use style attribute.
Show me?
<div class="content" style="display:none">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>

If this information is sensitive/not supposed to be seen without access granted, hiding it with CSS will not fix your problem. If it's not, you can ignore all of this and just use CSS with a display: none property.
If the information IS supposed to be hidden:
You need to only load the file itself on-demand. You would request the data with AJAX, do a $('.content').html() or .append() and send the result back directly from the server to the browser using something like JSON.

You are using the "ready" function that meant it will hide the element when the document is ready (fully loaded).
You can hide it using css:
.contnet { display: none; }

how you render you site server side does not affect how the site is loaded on the browser, what affects it is how the specific browser chooses to load your javascript and html, what i would recommend is set the element to hidden with css, since that is applied before anything else. And keep you code as is, since the toggle will work anyways

You can also clean up the code a little bit.
<script>
$(document).ready(function(){
$('.content').hide();
$('#toggleMe').click(function(){
$('.content').slideToggle('fast');
});
});
</script>

Show/Hide div using if then statement (javascript)

I have this show/hide set up here: http://jsfiddle.net/TwDSx/38/
What I would like to do is have the plus sign go away if the content is showing and vise versa if the content isn't showing hide the minus sign and show the plus.
I read articles on this using images to swap out, but nothing with just using html/css. Also, I would like to keep the javascript out of the html if this is possible, and just call for it externally.
any help is appreciated!

EDIT :
You can attach an event handler on your click to toggle the display attribute of the + or - button
$('#hide,#show').click(function(){
$('#hide,#show').toggle();
})
Quick demo:
http://jsfiddle.net/TwDSx/39/

I modified your Javascript a little and extended it so you can keep it in an external file, you just need to ensure you hide the #show div with CSS if you load the page with the content already showing, or vice-versa for the #hide.
The Javascript is as follows:
$('#show').click(function() {
ShowClick();
});
$('#hide').click(function() {
HideClick();
});
//This Javascript can be external
function ShowClick() {
$('#content').toggle('slow');
$('#hide, #show').toggle();
};
function HideClick() {
$('#content').toggle('fast');
$('#show, #hide').toggle();
};
The Js-Fiddle can be seen here: http://jsfiddle.net/mtAeg/

I think the simplest solution is to have only one button, #toggle, and to change the content of that button like so:
$('#toggle').click(function () {
if (this.innerHTML == '-') {
$('#content').slideUp('fast');
this.innerHTML = '+';
} else {
$('#content').slideDown('slow');
this.innerHTML = '-';
}
});
fiddle