Develop Reference

How to show hide divs INSIDE divs easily?

My website is a blog where I have a page with all the posts on a single HTML page. The "posts" are just images inside divs and I need some information to be able to show and hide in side the parent div of the images. Heres how its set up:
HTML
<div class="posts">
<h3>mm/dd/yy<p class="preview">click to show more</p><p class="expand">click to show less</p></h3>
<h4>Title</h4><br>
<p class="expand">caption caption caption caption caption caption caption caption caption</p>
<div class="centertext">
<img class="post" src="path/to/image">
</div>
<br>
</div>
lil CSS
.expand{display: none;}
JS
$(document).ready(function(){
$(".posts").click(function(){
$('.expand').toggle();
$('.preview').toggle();
});
What ends up happening that I don't want to happen is that all images and their captions are hiding and showing when I just click one. Shown here or fullscreen here Someone please help me! Additional info: I am using JQuery and Bootstrap too

Change your JS to:
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand').toggle();
$(this).find('.preview').toggle();
});
});
Or more simple:
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand, .preview').toggle();
});
});
To toggle means, that you don't know the state. The best way is, to change a css-class or a data-attribute.

You can use event.target/this to refer the current object clicked and find child(expand/preview) of the object you clicked with find()
or
check for the children if it is .expand/.preview with function is() //not a better approach
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand').toggle();
$(this).find('.preview').toggle();
});
});
or
$(document).ready(function () {
$(".posts").click(function (event) {
$(event.target).find('.expand').toggle();
//check if target is .expand or its child then first go to its parent with .parents().eq() then apply find()
$(event.target).find('.preview').toggle();
//check if target is .preview or its child then first go to its parent with .parents().eq() then apply find()
});
});

How do I apply jQuery's slideToggle() to $(this) and do the opposite to all other elements?

What I'd like to do is have all elements of class collapsible_list not displayed by default (with one exception... see below*), and then toggle their display when their parent <div class="tab_box"> is clicked. During the same click, I'd also like for every other element of class collapsible_list to be hidden so that only one of them is expanded at any given time.
*Furthermore, when the page initially loads I'd also like to check to see if an element of collapsible_list has a child a element whose class is activelink, and if there is one then I'd like that link's parent collapsible_list element to be the one that's expanded by default.
Here's some sample html code:
<style>
.collapsible_list {
display: none;
}
.collapsible_list.active {
display: block;
}
</style>
<div id="sidebar">
<div class="tab_box">
<div class="collapsible_tab">2014</div>
<div class="collapsible_list panel-2014">
1
2
3
</div>
</div>
<div class="tab_box">
<div class="collapsible_tab">2013</div>
<div class="collapsible_list panel-2013">
<a class="activelink" href="/2013/1">1</a>
2
3
</div>
</div>
</div>
And here's where I'm currently at with the javascript (although I've tried a bunch of different ways and none have worked like I'd like them to):
$(document).ready(function() {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active");
$(".tab_box").click(function() {
$(this).children(".collapsible_list").toggleClass("active").slideToggle("slow", function() {
$(".collapsible_list.active:not(this)").each(function() {
$(this).slideToggle("slow");
});
});
});
});
I hope that's not too confusing, but if it is then feel free to let me know. Any help is much appreciated.

Since you have a dom element reference that needs to be excluded use .not() instead of the :not() selector
jQuery(function ($) {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active").show();
$(".tab_box").click(function () {
var $target = $(this).children(".collapsible_list").toggleClass("active").stop(true).slideToggle("slow");
//slidup others
$(".collapsible_list.active").not($target).stop(true).slideUp("slow").removeClass('active');
});
});
Also, instead of using the slide callback do it directly in the callback so that both the animations can run simultaniously
Also remove the css rule .collapsible_list.active as the display is controlled by animations(slide)

Try This.
$('.collapsible_tab a').on('click', function(e){
e.preventDefault();
$('.collapsible_list').removeClass('active')
$(this).parent().next('.collapsible_list').toggleClass('active');
});
Fiddle Demo

I think your code would be less complicated if you simply remembered the previously opened list:
jQuery(function($) {
// remember current list and make it visible
var $current = $('.collapsible_list:has(.activelink)').show();
$(".tab_box").on('click', function() {
var $previous = $current;
// open new list
$current = $('.collapsible_list', this)
.slideToggle("slow", function() {
// and slide out the previous
$previous.slideToggle('slow');
});
});
});
Demo

Swap two divs with a same class

I am sort-of stuck with this minor part and I can't move on with my project.
Basically what I am trying to do is to fadeIn/fadeOut between two divs with same class, but keep the function as short as possible.
I have made following but apparently it will work only if both divs are hidden in the begginging and I need to show default title (first div) on load and after 2 seconds I want to swap to another title and then it will keep going circular.
HTML:
<div class="ref-title">Sample Title #1</div>
<div class="ref-title">Sample Title #2</div>
JS:
function titleSwap () {
$('.ref-title:hidden:first').fadeIn(500).delay(2000).fadeOut(500, function () {
$(this).appendTo($(this).parent());
titleSwap();
});
} titleSwap();
CSS:
.ref-title {
display: none;
}
JS Fiddle Demo
So I need first div displayed as block and then it will disappear and the other one will appear and keep going on like that... Any tips ?

JSFiddle - Adding a hidden class to the div you want to start as hidden and then changing the function as below should work.
HTML
<div class="ref-title">Sample Title #1</div>
<div class="ref-title hidden">Sample Title #2</div>
CSS
.hidden {
display: none;
}
JS
(function titleSwap() {
$('.ref-title').not('.hidden').delay(2000).fadeOut(500, function () {
var $me = $(this);
$('.ref-title.hidden').removeClass('.hidden').hide().fadeIn(500, function () {
$(this).removeClass('hidden');
$me.addClass('hidden');
titleSwap();
});
});
})();
Additionally, if you don't want to include the hidden class on the DIV within the mark-up you can just use $('.ref-title:nth-child(2)').addClass('hidden'); before the titleSwap function to add the class to the second DIV.

If you can use just show/hide you can try like this: show/hide Example
function toggleTitle() {
$('header > h2').delay(2000).toggle('fast', function () {
toggleTitle();
});
}
If you must use fadeIn/fadeOut its a bit more complicated due to the concurrent fade effect between the titles... this is my solution fadeIn/Out Example
function toggleTitle() {
var visible = $('header > h2:visible');
var hidden = $('header > h2:hidden');
visible.delay(2000).fadeToggle('fast', function () {
hidden.fadeToggle('fast');
toggleTitle();
});
}

it's easy if you put ID's on them, is this posible? check out this answer
jQuery fadeOut one div, fadeIn another on its place
$('#fadeout').fadeOut(300);
$('#fadein').delay(2000).fadeIn(300);
if you cannot add IDs, try this. it assumes they are the only elements under their immediate parent
$('.ref-title:first-child').fadeOut(300);
$('.ref-title:last-child').delay(2000).fadeIn(300);

jQuery UI Sortable on Click

I have the jQuery UI sorting functionality working fine, but I would also like to add in a basic click action to cause the draggable items to change <ul>. I have the <div class="click_area"> disabled from dragging. What I would like is in the first <ul> if the click_area is clicked then the sortable <li> would move to the second <ul> just as if I had dragged it over. Same deal if the click_area is clicked in the second <ul> it will be moved to the first <ul>. I have created a JS Fiddle for testing: http://jsfiddle.net/helpinspireme/wMnsa/
Any suggestions would be greatly appreciated. Thanks.

$("#unassigned_list, #recipients_list").sortable({
connectWith: ".connected_sortable",
items: "li",
handle: ".draggable_area",
stop: function(event, ui) {
updateLi(ui.item);
}
}).disableSelection().on("click", ".click_area", function() {
// First figure out which list the clicked element is NOT in...
var otherUL = $("#unassigned_list, #recipients_list").not($(this).closest("ul"));
var li = $(this).closest("li");
// Move the li to the other list. prependTo() can also be used instead of appendTo().
li.detach().appendTo(otherUL);
// Finally, switch the class on the li, and change the arrow's direction.
updateLi(li);
});
function updateLi(li) {
var clickArea = li.find(".click_area");
if (li.closest("ul").is("#recipients_list")) {
li.removeClass("ui-state-default").addClass("ui-state-highlight");
clickArea.html('←');
} else {
li.removeClass("ui-state-highlight").addClass("ui-state-default");
clickArea.html('→');
}
}
​

Here is a starting place for you,
.on('click', '.click_area', function(){
$(this).parent().appendTo($("#unassigned, recipients").not($(this).closest("ul")));
})
The trick being that the click handler is on the parent container not the individual children, so when they are moved you don't need to keep managing their handlers.
All you need to do is update the stylings.
jsFiddle

javascript set element background color

i have a little javascript function that does something when one clicks on the element having onclick that function.
my problem is:
i want that, into this function, to set a font color fot the html element having this function onclick. but i don't suceed. my code:
<script type="text/javascript">
function selecteazaElement(id,stock){
document.addtobasket.idOfSelectedItem.value=id;
var number23=document.addtobasket.number;
number23.options.length=0;
if (stock>=6) stock=6;
for (i=1;i<=stock;i++){
//alert ('id: '+id+'; stock: '+stock);
number23.options[number23.options.length]=new Option(i, i);
}
}
</script>
and how i use it:
<li id = "product_types">
<a href="#" onclick='selecteazaElement(<?= $type->id; ?>,<?= $type->stock_2; ?>);'><?= $type->label; ?></a>
</li>
any suggestions? thanks!
i have added another function (jquery one) that does partially what i need. the new problem is: i want that background color to be set only on the last clicked item, not on all items that i click. code above:
$(document).ready(function() {
$('.product_types > li').click(function() {
$(this)
.css('background-color','#EE178C')
.siblings()
.css('background-color','#ffffff');
});
});
any ideas why?
thanks!

I would suggest
$(document).ready(function() {
$('.product_types > li').click(function() {
$('.product_types > li').css('background-color','#FFFFFF');
$(this).css('background-color','#EE178C');
});
});

Your element could have this code:
<li id = "product_types" onclick="selecteazaElement(this);" <...> </li>
To change the foreground color of that element:
function selecteazaElement(element)
{
element.style.foregroundColor="#SOMECOLOR";
}
If you want to change the background color on only the last element clicked, each element must have a different id. I'd suggest naming each one something like product_types1, product_types2, ..., product_typesN, and so on. Then have a reset function:
function Reset()
{
for (var i = 1; i <= N; i = i + 1)
{
document.getElementById('product_types'+i).style.backgroundColor="#RESETCOLOR";
}
}
When you call your selecteazaElement(this) function, first call the Reset function, then set the new element:
function selecteazaElement(element)
{
Reset();
element.style.backgroundColor="#SOMECOLOR";
}
This way all of the elements that start with product_types followed by a number will be reset to one particular color, and only the element clicked on will have the background changed.

The 'scope' of the function when invoked is the element clicked, so you should be able to just do:
function selecteazaElement(id,stock){
document.addtobasket.idOfSelectedItem.value=id;
var number23 = document.addtobasket.number;
number23.options.length=0;
if (stock>=6){
stock=6;
}
for (var i=1;i<=stock;i++){
//alert ('id: '+id+'; stock: '+stock);
number23.options[number23.options.length]=new Option(i, i);
}
// Alter 'this', which is the clicked element in this case
this.style.backgroundColor = '#000';
}

$(function() {
/*if product_types is a class of element ul the code below
will work otherwise use $('li.product_types') if it's a
class of li elements */
$('.product_types li').click(function() {
//remove this class that causes background change from any other sibling
$('.altBackground').removeClass('altBackground');
//add this class to the clicked element to change background, color etc...
$(this).addClass('altBackground');
});
});
Have your css something like this:
<style type='text/css'>
.altBackground {
background-color:#EE178C;
/* color: your color ;
foo: bar */
}
</style>

Attach a jQuery click event to '#product_types a' that removes a class from the parent of all elements that match that selector; then, add the class that contains the styles you want back to the parent of the element that was just clicked. It's a little heavy handed and can be made more efficient but it works.
I've made an example in jsFiddle: http://jsfiddle.net/jszpila/f6FDF/

try this instead:
//ON PAGE LOAD
$(document).ready(function() {
//SELECT ALL OF THE LIST ITEMS
$('.product_types > li').each(function () {
//FOR EACH OF THE LIST ITEMS BIND A CLICK EVENT
$(this).click(function() {
//GRAB THE CURRENT LIST ITEM, CHANGE IT BG, RESET THE REST
$(this)
.css('background-color','#EE178C')
.siblings()
.css('background-color','transparent');
});
});
});
If I am correct, the problem is that the click event is being binded to all of the list items (li). when one list item is clicked the event is fired on all of the list items.
I added a simple .each() to your code. It will loop through each of the list items and bind a event to each separately.
Cheers,
-Robert Hurst