Develop Reference

Jquery open and close within a parent div

The title does not explain that well, essentially I have 8 divs the same, with the same class for css styling.
They all have hidden content, I want to be able to only expand one div at a time without using different classes or identifiers for each div and hidden content.
I have tried to display this on Jsfidle using two divs the same , however I can't even get it to fire on jsfiddle for some reason
http://jsfiddle.net/dAXJ2/8/
$(document).on('click',".servicereadmore",function() {
//var x = $(this).closest('div').attr('class')
//$('.hiddenservices').parent(x).slideDown(1000);
$('.hiddenservices').slideDown(1000);
$(this).html("Read less");
$(this).removeClass("servicereadmore");
$(this).addClass("servicereadless");
});
$(document).on('click', ".servicereadless" ,function() {
$('.hiddenservices').slideUp(1000);
$(this).html("Read more");
$(this).removeClass("servicereadless");
$(this).addClass("servicereadmore");
});
That currently works above but opens all the hidden text as stated, the comments are were I have been trying to only expand within the parent div of the button I pressed

Your clickable <a> tags should probably be buttons, since that's the role they're in. Also, your functions aren't working currently because you've added
return false;
as the first statement of each one. That prevents any of the code after that from ever running. Instead of that, either change those <a> links to <button type=button> or else add a parameter to the handlers ("e" or "event") and call
e.preventDefault();
in the handler.
To affect only the portion of the page relevant to the "Read More" links, you just need to navigate the DOM:
$(this).closest('.myinfo').find('.hiddenservices').slideDown(1000);
That means: "staring from the clicked element, climb up the DOM to find the closest element with class 'myinfo', and then from that point down find all the elements with class 'hiddenservices' and slide them down."
A couple of other problems: you'll need to start the "hiddenservices" sections off as hidden, or otherwise not visible somehow. Also, another issue with your jsfiddle was that you didn't have jQuery selected. That's something you could quickly learn just by checking the error console.
Here is a repaired jsfiddle.

You dont have to use that much of code for this purpose. USe simply like
$(document).on('click', ".servicereadmore", function (e) {
e.preventDefault();
if ($(this).parent().find('.hiddenservices').is(":visible")) {
$(this).html("Read more");
} else {
$(this).html("Read less");
}
$(this).parent().find('.hiddenservices').slideToggle(1000);
});
Instead of adding and removing the class name, you can just use slideToggle().
Demo

Javascript click function not responding

I have simple script which make layer on background when popup div is shown.
jQuery(".openForm").click(function() {
jQuery("#popup").show();
jQuery("body").append('<div id="layer"></div>');
});
This works fine but, when I click somewhere it should close popup with this script
jQuery("#layer").click(function() {
jQuery("#popup").hide();
jQuery("#layer").remove();
});
anyway nothink happens, there is no error even.

I'm guessing #layer doesn't exist when you attempt to bind the handler. Use event delegation instead:
jQuery(document).on('click', "#layer", function() {
jQuery("#popup").hide();
jQuery("#layer").remove();
});
Alternatively, you could hide/show the #layer div (like the #popup div) instead of adding and removing it each time.

Hover only works when user clicks on the element

Following is the link to my js fiddle in which i am trying to show a popover on hover property of the element hover for popover with id a1 . The problem i am facing is that when the page loads for the first time and on hover on that element the popover doesnot display. But when user clicks on hover for popover and then do the hover, then hover property works perfectly fine kindly let me know why isn't it happening on the page load event and how can i fix it so user doesnot have to click on the button and it display whatever in it.
Note: It can be easily done by following but the problem is ids for the elements are being dynamically generated so i cannot use the following method for specifically one id.
$(function ()
{ $("#example").popover();
});
JSFIDDLE:
http://jsfiddle.net/weuWk/323/

First, add a class to all of your hover elements:
<span id="a1" class="btn large primary hoverable">Popover</span>
Then, add the popover to each item:
$(document).ready(function(){
$('.hoverable').popover({title: "Hello"});
});
Edit: To reference the id (or any other attribute), you can use .attr() as follows:
$(document).ready(function(){
$('.hoverable').each(function(){
$(this).popover({title: $(this).attr('id')});
});
});

I think the problem comes from the fact you are calling the popover() function before your document is properly loaded and then before $('#a1') in your example can match anything.
Check your updated jsfiddle here : http://jsfiddle.net/weuWk/325/
You need to call popover only when your document is ready like this :
$(document).ready(function() {
$('#a1').popover({title: "Hello"});
});

fixed http://jsfiddle.net/pieterwillaert/weuWk/327/
what you do is the following:
when the document is loaded you iterate through all your buttons (I did it by using 'span' you could easely change that too '.button')
you give each button a popover
$(document).ready(function() {
$('span').each(function(index) {
$(this).popover({title: "Hello"});
});
});​

toggleDown jquery not working

When you hover over the arrow it should toggle the footer down so you can see its content. When the mouse is inside the #footer the div should remain opened so you can read the content.
The problem is when you hover on the arrow the div just opens and closes.
here is a working example: http://jsfiddle.net/MEJgb/1/

try changing this line
jQuery(this).next("#footer_toggle").slideToggle("slow");
to
jQuery(this).next("#footer_toggle").stop().slideToggle("slow");
Or try something like this I guess if I understand your question right
http://jsfiddle.net/MEJgb/21/

Instead of using hover event use click event for this
jQuery("#toggleDiv").click(function() {});
Working Demo is here!!
I hope it will works..

$(document).ready(function() {
// footer Toggle
$("#footer_toggle").hide();
$("#toggleDiv").click(function() {
$("#footer_toggle").slideToggle();
if($("#toggleDiv").hasClass('active'))
$("#toggleDiv").removeClass("active");
else
$("#toggleDiv").addClass("active");
});
});

jQuery - how to hide a DIV element only when clicking outside of it

I have a DIV element that appears when a certain action is performed. For the sake of simplicity, I wrote a very simple routine that mimics the issue I'm running into. The problem I am facing, however, is that when you click inside the DIV element (and outside the textarea), it will hide the DIV anyway.
Here is the code below:
<body>
outside div
<br><br>
make inside appear
<br><br>
<div id='wrap' style='background:red;display:none;padding:10px;width:155px'>
<textarea id='inside'>inside div</textarea>
<div id='inside2'>also inside div -- click me</div>
</div>
</body>
<script>
$(document).ready(function() {
$('#wrap_on').click(function() {
$('#wrap').show();
$('#inside').select().focus();
});
$('#inside2').click(function() {
alert('test');
});
// #inside2 does not work but #wrap does hide
$('#wrap').focusout(function() {
$('#wrap').hide();
});
});
</script>
Or you can tinker with it here: http://jsfiddle.net/hQjCc/
Basically, I want to be able to click on the text "also inside div -- click me" and have the alert popup. However, the .focusout function is preventing it from working. Also, I want to hide the #wrap DIV if you click outside of it.

$(document).click(function(e) {
var t = (e.target)
if(t!= $("#inside").get(0) && t!=$("#inside2").get(0) && t!=$("#wrap_on").get(0) ) {
$("#wrap").hide();
}
});
this should work after all.
http://jsfiddle.net/hQjCc/4/

See this other stack overflow question: Use jQuery to hide a DIV when the user clicks outside of it