We Keep Coding

How can I hide my div using jQuery, and then showing it again by pressing a different div?

What I want to do is:
Make my div hidden when the page loads, and then when you click a different div it will show. My limited knowledge doesn't really allow me to make this happen. What am I doing wrong?
jQuery:
$(document).ready(function(){
$('#trojkat2').click(function(){
$('#login').hide();
});
});
</script>
"trojkat2" is the div I want to click to make "login" appear.
HTML:
<div class="kwadrat2">
<div class="trojkat2">
<div class="trojkat_bg2"></div>
</div>
</div>
<div class="login">
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg">
</div>
What have I done wrong?

First, hide your #login div when document ready by .hide() function, after click $(.trojkat2), use show() to make #login appear, by the way class selector is . instead of #
$(document).ready(function(){
$('.login').hide();
$('.trojkat2').click(function(){
$('.login').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kwadrat2">
<div class="trojkat2">click here
<div class="trojkat_bg2"></div>
</div>
</div>
<div class="login">
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg">
</div>

Try this:
$('.trojkat2').click(function() {
$('.login').show();
});

Your example doesn't have an element with id = trojkat2 so your selector $("#trojkat2") won't work. Same is for #login. Instead you need to change it to a class selector :
$('.trojkat2').click(function(){
$('.login').hide();
});
Example : http://jsfiddle.net/DinoMyte/nrNX8/529/

In your HTML code, you created classes called login and trojkat2. However, in your jQuery, you are telling it to call the IDs called login and trojkat2. Classes are preceded with a "." and IDs are preceded with a "#". Instead, try the following code in your jQuery:
$(document).ready(function(){
$('.trojkat2').click(function(){
$('.login').hide();
});
});

jquery start from hidden

I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.

Hide button by default with CSS rules:
.menu-content {
display: none;
}

If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.

My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>

JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)

as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/

Javascript onclick events

I want to blur my images by clicking on it. I am using javascript on click event for this purpose. But it is not working exactly as I want. My code is given below:
<script>
$(document).ready(function(){
$(".ww").click(function(){
$(this).css("opacity","0.2");
});
});
</script>
<div class="bg">
<div class="img ww1"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
<div class="bg">
<div class="img ww2"><center><img src="img.jpg" /></center></div>
<div class="canname"><center>GHULAM MUSTAFA</center></div>
<div class="partyname"><center>JATOI <span style="color:#CCC;">NPP</span></center></div>
</div>
I want that when I click first image then its opacity would set. And that when I click second image so the opacity of first image would finish and second image would set.

As the others already tried to explain, you have to use a selector which actually selects both elements, since you want to bind the event handler to both of them. $('.ww') does not select any element in the code you posted.
Toggling the opacity can be easier done when using a class:
.selected {
opacity: 0.2;
}
Add the class to the clicked element and removed it from the element currently having the class:
$(".img").click(function(){
$('.img.selected').add(this).toggleClass('selected');
});
Have a look at this DEMO. This should give you enough information to apply it to your situation.

Because a selector .ww does not match ww1 and ww2.
You can see that with
console.log($(".ww").length);
Use the common class img or add the class ww.

<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#my').toggle(
function(event) {
$(event.target).css('opacity',0.4);
},
function(event) {
$(event.target).css('opacity',1.0);
}
);
});
</script>
</head>
<body>
<body>
<div id="my">asdf</div>
</body>
</html>

jQuery - If DIV class equals X, hide all other DIVs with a different class

I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.
Firstly, here is my HTML code:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
I'm wanting a jQuery code that would do the following:
If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"
If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"
If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)
I've already tried the following code, but it doesn't do anything.
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
Thank you for any help,
Dylan.

So many choices :) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});

try using jquery
Demo
$('#choice-all').click(function(){
$('.htc, .asus').show();
});
$('#choice-asus').click(function(){
$('.asus').show();
$('.htc').hide();
});
$('#choice-htc').click(function(){
$('.htc').show();
$('.asus').hide();
});

Demo here
$(document).ready(function(){
$(".choice").click(function(){
$(".android,.winph").hide();
if($(this).attr("id")=="choice-all"){
$(".android,.winph").show();
}else if($(this).attr("id")=="choice-asus"){
$(".asus").show();
}else if($(this).attr("id")=="choice-htc"){
$(".htc").show();
}
});
});

to keep it easy and clean you should use a solution such as this one
$(function(){
$('#choice-asus').on('click', function(){
$('#devices > div:not(.asus)').hide();
});
});
it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.
you can extend / modify this for your own needs.
besides, its recommend to use jquerys .on() method instead click/bind or what ever handler you'd apply.

$(document).ready(function(){
if($('div').attr('class')=='X')
{
$('div').not($(this)).css('display','none');
}
});

You can try the following code-
function showAll(){
$("#devices div").show();
}
function justASUS(){
$("#devices div").hide();
$("#devices .asus").show();
}
function justHTC(){
$("#devices div").hide();
$("#devices .htc").show();
}
demo here.

Shortening my jQuery

How would I make this jQuery shorter? I assume there must be a better way of working than this!?
(bare in mind I am new to jQuery)...
<script>
jQuery(function() {
var White = jQuery("#white").hide();
jQuery("#firstpagename").on("click", function() {
White.toggle();
});
});
</script>
<script>
jQuery(function() {
var Black2 = jQuery("#v2black").hide();
jQuery("#secondpagename").on("click", function() {
Black2.toggle();
});
});
</script>
<script>
jQuery(function() {
var Black3 = jQuery("#v3black").hide();
jQuery("#thirdpagename").on("click", function() {
Black3.toggle();
});
});
</script>
Any help or directions would be greatt as I am down to the last step on this site and want it finished :)

You could use some extra data attribute and an extra class on your links to make it a little shorter.
So let's say your html looks like this:
<div id="white">white</div>
<div id="v2black">v2black</div>
<div id="v3black">v3black</div>
<div id="firstpagename" class="toggle" data-for="white">toggle white</div>
<div id="secondpagename" class="toggle" data-for="v2black">toggle v2bacl</div>
<div id="thirdpagename" class="toggle" data-for="v3black">toggle v3black</div>
then your jquery can rewritten like this:
jQuery(function() {
$('.toggle').on('click', function() {
var id = $(this).attr('data-for');
$('#' + id).toggle();
});
});

So it looks like we're trying to recreate standard "accordion" behaviour. Depending on the layout of your page, it can be helpful to encapsulate your items if possible. Here is one possible solution to make things that open and close. jsFiddle
<div id="white" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<div id="v2black" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<div id="v3black" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>​
<script>
jQuery(".tab").on("click", function() {
$(this).closest('.panel').find('.content').toggle();
});​
</script>
First we condensed the code into one script tag and one document ready statement, since having it in 3 pieces was only adding bloat.
Then I made sure to chose $ as the parameter for the doc ready callback. jQuery will kindly pass it one argument jQuery so inside our code block we can safely use $ even if outside our code-block it was reserved for other purposes.
Here the .tabs control their .content by traversing up to the nearest .panel and back down. In this way the same behaviour can control all 3.
If however your "tabs" can't be encapsulated like this you can always associate them to the content they are to show/hide in another way. We'll just need to see your html.

<script>
jQuery(function() {
var White = jQuery("#white").hide();
jQuery("#firstpagename").on("click", function() {
White.toggle();
var Black2 = jQuery("#v2black").hide();
jQuery("#secondpagename").on("click", function() {
Black2.toggle();
});
var Black3 = jQuery("#v3black").hide();
jQuery("#thirdpagename").on("click", function() {
Black3.toggle();
});
});
</script>
for the start. If you have many more elements, you might want to loop through a buttonid<>toggleid map:
var map = {
"white": "firstpagename",
"v2black": "secondpagename",
...
};
for (var toggler in map)
makeToggle(toggler, map[toggler]);
function makeToggle(togglerid, pageid) {
var page = $(document.getElementById(pageid)).hide();
$(document.getElementById(togglerid)).click(function() {
page.toggle();
});
}