We Keep Coding

how toggle all div tags

how? when click the .button, hide all .body div tags and show just closest .body tag div
my codes first one works, but when click the .button, show .body, but when click again, does't toggle ( show / hide ) that, any more?
How to do it properly?
Edit : how to change .button > span icon? ( positive or negative )
Edit : jQuery(this).find('positive').toggleClass('negative'); ?
Edit (saitho): JSFiddle: https://jsfiddle.net/nL4sxbj0/2/
HTML
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="positive"></span>
</a>
</div>
<div class="body">
</div>
</div>
CSS
.body {
display:none;
}
.button .positive,
.button .negative {
width:36px;
height:36px;
float:right;
display:block;
cursor:pointer;
}
.button .positive {
background:url('../img/icon-del.png') no-repeat center center / 18px;
}
.button .negative {
background:url('../img/icon-opn.png') no-repeat center center / 18px;
}
JQUERY
jQuery('.button').on('click' ,function(e) {
e.preventDefault(); // Is this necessary? for
jQuery('.body').hide(); // Problem is hear i think
jQuery(this).closest('.box').find('.body').toggle();
});
Picture

add class iconbtn to button span
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="iconbtn positive"></span>
</a>
</div>
<div class="body">
</div>
jQuery('.button').on('click' ,function(e) {
e.preventDefault();
var box = jQuery(this).closest('.box');
var closestBody = box.find('.body');
jQuery('.body').not(closestBody).hide(); // Hide all except above div
jQuery(closestBody).toggle(); // if visible hide it else show it
jQuery('.iconbtn').removeClass('negative').addClass('positive');
var iconBtn = box.find('.iconbtn');
if (jQuery(closestBody).is(':visible')) {
iconBtn.removeClass('positive').addClass('negative');
} else {
iconBtn.removeClass('negative').addClass('positive');
}
});
jsFiddle Link

The issue is that you have:
jQuery('.body').hide();
in your click callback, that means the body div is first being hidden and then toggle works as it should - it shows the div. There is no way it can hide it though, as before toggle you always first hide the div
Remove this line and it should work, check it here: JS Fiddle

JQuery Hamburger Menu Functions

Below is the script I am trying to write to control two functions when the website's menu button is clicked; it is a hamburger menu that toggles the menu links. The first function shows/hides the menu links and the second fades an element on the page, both activated when the menu button is clicked.
In the first function, I am having trouble creating a delay/fadeIn for the menu links. I need '.navbar-item' to fade in and out when the menu is clicked. In the second function, I need to revert the opacity to 1.0 when the menu is clicked a second time. I can not get any of the effects to occur after the first effect has completed, i.e Menu is clicked to fade in menu links and dim '.values', menu is clicked to fade out menu links and revert '.values' to 100% opacity.
<div class="container">
<section class="header">
<h2 class="title">Title
<li class="client-item"><a class="client-link" href="#"><i class="fa fa-bars"></i></a></li></h2>
</section>
<nav class="navbar" style="display: none;">
<ul class="navbar-list">
<li class="navbar-item"><a class="navbar-link" href="#" target="_top">Contact</a></li>
<li class="navbar-item navbar-link">Store</li>
</ul>
</nav>
<div class="section values">
<div class="container">
<div class="row">
<div class="one-full column">
</div>
</div>
</div>
</div>
// Main Script For Site
$(document).ready(function() {
$('.client-link').click(function() {
$('.navbar').slideToggle("fast");
$('.values').animate({opacity:'0.6'});
});
});

This answer gives how to get simultaneous animations. jQuery's own docs describe slideToggle, including the bits you'd need to set similarly to how animate would need to be set.
I might also point out that there's no reason to separate the animate calls like you have. Since they're triggered by the same thing, they should be called from the same place.
Something like this, I think:
$(document).ready(function() {
$('.client-link').click(function() {
var $this = $(this);
var opening = !$this.data('isOpen');
$this.data('isOpen',opening);
if(opening) {
// opening animations
$('.navbar').slideDown({duration:'fast',queue:false});
$('.values').animate({opacity:1},{queue:false});
} else {
// closing animations
$('.navbar').slideUp({duration:'fast',queue:false});
$('.values').animate({opacity:0},{queue:false});
}
});
});
Though you may be better off moving your animations to CSS and just toggling a class.

You were very close, you have just made some simple mistakes. Here is a JSFiddle gives you a solution to your problem: https://jsfiddle.net/nv1gytrs/1/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="client-link"></div>
<div class="navbar"></div>
<div class="values"></div>
CSS:
.client-link {
height: 100px;
width: 100px;
border: 2px solid green;
}
.navbar {
height: 100px;
width: 100px;
border: 2px solid red;
}
.values {
height: 100px;
width: 100px;
border: 2px solid blue;
transition: all 1s;
}
.fade {
opacity: 0.2;
}
JS:
// Main Script For Site
$(document).ready(function() {
$('.client-link').on("click", function() {
$('.navbar').slideToggle("fast");
$('.values').toggleClass("fade");
});
});
Of course, all of your HTML and CSS would be unique to what you are trying to accomplish, this is just an example.

Show/Hide divs that occupy the same space with separate links

I'm having an issue with trying to get divs to occupy the same space, and to also have a show/hide ability on them when clicking their respective links.
Can anybody please let me know the proper jQuery to put in to make this happen? Below is the code without jQuery.
The idea is that when I click on Print 1, then the piece #1 will show up, and when I click Print 2, #1 will disappear and #2 will take it's place.
Current HTML looks something vaguely like this:
<div id="content">
<div id="SideNav">
<ul>
<li>
<a>Print 1</a>
</li>
<li>
<a>Print 2</a>
</li>
</ul>
</div>
<div id="pieces">
<div id="1">
</div>
<div id="2">
</div>
</div>
</div>
CSS is basically this:
#content {
width:848px;
position:relative;
}
#SideNav {
width:169px;
float:left;
}
#pieces {
width:678px;
top:0px;
float:right;
position:relative;
}
#1 {
position:absolute;
top: 0px;
right: 0px;
z-index:1;
}
#2 {
position:absolute;
top: 0px;
right: 0px;
z-index:2;
}

JSFIDDLE
a Basic example of what you want to achieve :
JS :
$('a').on("click",function(){
alert($(this).text());
if($(this).text() == "Print 1"){
$('#1').show();
$('#2').hide();
}else{
$('#2').show();
$('#1').hide();
}
});
putting an event on click of your anchors and then checking the value of the clicked anchor.

Assuming the first link toggles the visibility of the first div and the second link toggles the second div
$('a').click(function() {
var index = $(this).closest('li').index();
$('#pieces div').eq(index).toggle();
}
And set display:none on the the second div

The trick is to make your markup structure a little more meaningful, and your CSS styling a little more generalized. This allows you to leverage common indexes between the links and the tabs below, as well as to define the style using a single CSS class. Then you can easily scale the solution for any number of links and panels:
jsFiddle
HTML
<div id="content">
<div id="SideNav">
<ul>
<li> Print 1
</li>
<li> Print 2
</li>
</ul>
</div>
<div id="pieces">
<div id="panel1" class="panel">First Div</div>
<div id="panel2" class="panel">Second Div</div>
</div>
</div>
CSS
/*
#content, #SideNav, #pieces
Same As Before
*/
.panel {
display: none;
position:absolute;
top: 0px;
right: 0px;
}
JS
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});

You setup the click function for each of the anchors within the #sideNav container, prevent the default anchor tag function(preventDefault(), in case an href attribute is provided) and then execute what you want to do.
$('#sideNav a').click(function(e){
// prevent default link event
e.preventDefault();
// use show()/hide() or toggle()
});

.replaceWith() to replace content in a div for different link elements

I am trying to load a div with different content based on the link I click...
While it seems to work for the first link when I click it, clicking the other links only replaces the content with the same content for 'encodeMe' , yet I have specified different content that I want to replace for 'htmlize-me'
The first run-through of this I did not use jQuery's .bind() function. I simply used .click() , and both had the same result. Looking through the jQuery API I thought using the .bind() function would bind each function within it to that particular page element, but it seems to apply it to all my links.
I've achieved the same effect using .hide and .show to toggle divs but I want to be more elegant about how I do that, and this was my attempted alternative...
here's the relevant html:
<label for="list-root">App Hardening</label>
<input type="checkbox" id="list-root" />
<ol>
<li id="encode-me"><a class="show-popup" href="#">encodeMe()</a></li>
<li id="htmlize-me"><a class="show-popup" href="#">htmlizeMe()</a></li>
</ol>
<div class="overlay-bg">
<div class="overlay-content">
<div class="the-content"></div>
<br><button class="close-button">Close</button>
</div>
</div>
here's the script I made to trigger the content change:
$('#encode-me').bind('click' , function() {
$('div.the-content').replaceWith('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').replaceWith('Hi, Im something different');
});
});

Try something like this:
Use html() instead of replaceWith()
$('#encode-me').bind('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').html("Hi, I'm something different");
});
});

replaceWith does exactly what it sounds like, it replaces the div with the h3, so when you click the second link there is no div.
Try setting the innerHTML instead
$('#encode-me').on('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>Found in <p>[web root]/redacted/redacted.asp</p>');
});
$('#htmlize-me').on('click' , function() {
$('div.the-content').html('Hi, I\'m something different');
});

So I figured out a more clever way to do this! Use the DOM to your advantage - set up a nested list structure and change the content using .find() on parent and child elements the list.
Markup
<span style="font-size:1.4em">Type
<ul class="row">
<li>Blah
<div class="overlay-content">
<p></p>
<p class="changeText">Blah</p>
</div>
</li>
<li>Blah2
<div class="overlay-content">
<p></p>
<p class="changeText">Blah2</p>
</div>
</li>
</ul>
</span><br>
<!-- OVERLAYS -->
<div class="overlay"></div>
CSS
.close {
border-radius: 10px;
background-image: url(../img/close-overlay.png);
position: absolute;
right:-10px;
top:-15px;
z-index:1002;
height: 35px;
width: 35px;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:10;
height:100%;
width:100%;
background:#000;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
display:none;
}
.overlay-content {
position:fixed!important;
width: 60%;
height: 80%;
top: 50%;
left: 50%;
background-color: #f5f5f5;
display:none;
z-index:1002;
padding: 10px;
margin: 0 0 0 -20%;
cursor: default;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
Script
$(document).ready(function(){
$('.show-popup').click(function() {
var ce = this;
$('.overlay').show('slow', function() {
$(ce).parent().find('.overlay-content').fadeIn('slow');
});
});
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var docHeight = $(document).height(); //grab the height of the page
var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
$('.overlay').show().css({'height' : docHeight}); //display your popup and set height to the page height
$('.overlay-content').css({'top': scrollTop+100+'px'}); //set the content 100px from the window top
});
/*
// hides the popup if user clicks anywhere outside the container
$('.overlay').click(function(){
$('.overlay').hide();
})
*/
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
$('.close').click(function() {
$('.overlay-content').hide('slow', function() {
$('.overlay').fadeOut();
});
});
});

jQuery hide div, show div with new content

I am trying to retract my div, then show it with new content based on which link they clicked.
HTML:
<div id="menu">
<ul>
<li>about</li>
<li>contact</li>
<li>cv</li>
</ul>
</div>
<div class="content">
test
<div id="content_1" class="content">
content1
</div>
<div id="content_2" class="content">
content2
</div>
<div id="content_3" class="content">
content3
</div>
</div>
JS:
<script type="text/javascript">
$(document).ready(function(){
$("a.menu").click(function() {
var clicked = $(this).attr('title');
$(".content").hide('slide', {direction: 'right'}, 1000);
$("#"+clicked).show('slide', {direction: 'left'}, 1000);
});
});
</script>
CSS:
.content {
position: absolute;
left:303px;
top: 200px;
width: 100%;
margin-top: 200px;
background: #6c7373;
}
#content_1, #content_2, #content_3 {
display: none;
}
What happens is: the div retracts, but does not reappear at all, what is going wrong here?
Thanks.

First, notice that the container for all of the potential DIVs has the content class so it's being hidden as well. Since the container is hidden, it won't matter if you "show" one of the contained elements. Second, note that the "hide" statement and the "show" statement will have a race condition since they will both apply to the element that's being hidden. It would be better to show the item in the callback to the hide operation or exclude it from being hidden.
<div class="content_wrapper"> <!-- give it a different class -->
test
<div id="content_1" class="content">
content1
</div>
<div id="content_2" class="content">
content2
</div>
<div id="content_3" class="content">
content3
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("a.menu").click(function() {
var clickedID = '#' + $(this).attr('title');
$(".content:not(" + clickedID +")").hide('slide', {direction: 'right'}, 1000);
$(clickedID).show('slide', {direction: 'left'}, 1000);
});
});
</script>

Change the outer .content to .content-wrapper.

Show and hide are both working at the same time. To avoid the conflict (and not hide then show the content that's visible if the user clicks the same item twice), show the one you want and hide the others by selecting them using siblings()
Working demo
$("a.menu").click(function() {
var clicked = $(this).attr('title');
$("#"+clicked).show(1000).siblings().hide(1000);
});
This will also solve the problem you have that you have given the wrapper div the class of .content too.
Also your ul li structure is wrong. You need the a tags inside the li. li must come directly after ul.