Develop Reference

javascript, div buttons with if else

$(document).ready(function() {
$('#b1').click(function() {
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('#uch2').toggle("slow");
})
})
I'm not a programmer but somehow managed to make div buttons that opens another div when clicked but I cant manage how to make so that when I click on one button that opens div and then when I click on other button it opens div and hides previous div. I want to integrate it later to joomla template, but as I use jquery and all efforts with if not working maybe someone is clever then me. thanks in advance. I place here working fiddle too.
fiddle example of my buttons
affter some usefull answers i reedited my code and managed to simplify it and added third button , now with extra css class everything seems pretty good but when i click already opened div it reappears as if looping.
edited fiddle
$(document).ready(function() {
$('#b1').click(function() {
$('.bats').hide("slow");
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('.bats').hide("slow");
$('#uch2').toggle("slow");
});
$('#b3').click(function() {
$('.bats').hide("slow");
$('#uch3').toggle("slow");
});
})

You can call hide('slow') on the other uch element on click of the button. Try this:
$('#b1').click(function() {
$('#uch').toggle("slow");
$('#uch2').hide("slow");
});
$('#b2').click(function() {
$('#uch').hide("slow");
$('#uch2').toggle("slow");
});
Working example

Change ID To Class
$(document).ready(function() {
$('.b1').click(function() {
$('.uch').hide();
$(this).find('.uch').toggle("slow");
});
});
https://jsfiddle.net/u28f6yeL/5/

Here is a working solution for your problem:
change your JQuery code like this:
$(document).ready(function() {
$('#b1').click(function() {
if($('#uch2').css('display') != 'none'){
$('#uch2').toggle("slow");
};
$('#uch').toggle("slow");
});
$('#b2').click(function() {
if($('#uch').css('display') != 'none'){
$('#uch').toggle("slow");
};
$('#uch2').toggle("slow");
});
});
Here's a JSFiddle

you can write a function which close the one is opend! than call them in your click-funktions before toggle the other.

Inconsistent jquery button click behaviour

Im a bit new to jquery so this may be a common probably but I am unable to find what I need on the web.
The issue:
I have a div(inner1) inside a div(outer), the inner1 div is hidden until a button is clicked, when clicked the inner1 div is shown and fades out the background. Within inner1 I have another div(inner2) with similar functionality. When inner1 shows a button is displayed to show inner2. The above works fine. My issue is that if I click the button to show inner1, then exit(hide) the shown div(inner1) then push the button to show it again it now shows both of the inner divs(inner1, inner2). Does this make sense? I have no idea why this is happening.
The Code:
Html:
<div class="documentlist">
<div class="modalBackground"></div>
<div class="modalContent"> x
Text1
<input type="button" id="btnsm1" value="t1" />
<div class="documentdetails">
<div class="modalBackground"></div>
<div class="modalContent"> x Text2</div>
</div>
</div>
</div>
<input type="button" id="btnsm" value="t" />
Jquery:
$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
});
A Fiddle of the above.
Does anyone have any ideas?

You need to explicitly say removeClass since .toggle() adds 'show' if not there and removes 'show' if present, cant rely on that in close where you always want to remove the show class from both the elements
Here is what you want to do
$('.close-modal,.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
Edit 2: I didn't check you had to use back as close trigger updated fiddle $('.close-modal,.modalBackground')
Updated fiddle

$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
});
Check this

Hide content in <div> using .html() without hiding inner <div>

I have the following HTML code, generated by C#:
<div class="more-news-items" id="#id">
<p>Content goes here</p>
<div style="text-align:center">
<button class="newsfeed-hide">TOON MINDER</button>
<button class="newsfeed-more">TOON MEER</button>
</div>
</div>
I want to hide the
<p>Content goes here</p>
using the following Javascript code, but I want to keep the buttons still in the div. How would I achieve this, and if it is not possible, how can I do this?
$(document).ready(function () {
div.find('.newsfeed-hide').click(function () {
$('.more-news-items').html('');
});
});

Try
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items').children('p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});

try:
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});
This will hide a p's that are siblings of the parent that the button is in.
But other posts are right in as much as if you want to hide all p's in div's with the class .more-news-items you can select this using $('.more-news-items p') instead. Depending on the exact situation you are using this code in (i.e. if you will have more than one area and only want all p's in all areas removed, or only the ones local to the button.
EDIT:
Remove the $('.more-news-items').html(''); also, this will remove all html inside the .more-news-items div, which you do not want to do here.
Here is the live example: http://jsfiddle.net/lee_gladding/dujc66qd/

How to add one class at the time in jquery

I want to add new div with same design on the box when I click on it! But I could click and it appears new divs as I wished, but I want to add one at the time not more than one. I mean if I click once and one new div should appear and if I click again 1 new div should appear. But when i clicked many times it adds more than one! Why?
$(".answered_box").click(function () {
$(".answered_box").prepend('<div class="answered_box"> hej </div>');
});
http://jsfiddle.net/jbNEC/
Thanks for the the help!

Do like this:
<div id="container">
<div class="answered_box"> test </div>
</div>
and jquery:
$(document).ready(function () {
$(".answered_box").live('click',function () {
$('#container').append($(this).clone());
});
});
Here is Fiddle DEMO

You may want to use this:-
$(this).prepend('<div class="answered_box"> hej </div>');

$(document).ready(function () {
$(".answered_box").click(function () {
// only apply on "this" and not on all members with the class.
$(this).prepend('<div class="answered_box"> hej </div>');
});
});

Your code is adding the div with class answered_box to all the divs with class answered_box. You should add the parent div and add divs to there.

Use this keyword it means to owner only the current div(class) will executed and other div's with same are omited.
$(document).ready(function () {
$(".answered_box").click(function () {
$(this).append('<div class="answered_box"> hej </div>');
});
});

Jquery anchor tag display problem

I am unable to show an anchor tag to display itself using .show() in Jquery or javascript. Conn Window is visible by default. It hides and displays the div but it is unable to do the same with anchor. I have manually tried to change it in firebug/IE dev tools and it works there. It just doesn't work when I do it with jquery/javascript.
Here is the HTML code:
<div id="connWindow">Conn Window
<div id="closeButton" onclick="javascript:connHide();"></div>
</div>
Here is the jquery code:
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
Any help will be greatly appreciated!

Why not bind your click events in jQuery as well
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
$(document).ready(function () {
$("#contab").click(function () {
connShow();
return false;
});
$("#connWindow").click(function() {
connHide();
});
});

The inline CSS display:none is overriding the mechanism jQuery uses to show and hide.
Hide the anchor programmatically instead:
HTML:
<div id="connWindow">
Conn Window
<div id="closeButton"></div>
</div>
Script:
$(function() { // on document load
$('#connTab').css('display', 'none');
// I'm going to replace your inline JS with event handlers here:
$('#connTab').click(function() { connShow(); return false; });
$('#closeButton').click(function() { connHide(); });
});
function connHide() {
$('#connTab').css('display', '');
$('#connWindow').css('display', 'none');
}
function connShow() {
$('#connWindow').css('display', '');
$('#connTab').css('display', 'none');
}
Hope that helps.

You don't need to state javascript: for onclick events. Try changing to:
<div id="closeButton" onclick="connHide();"></div>
I would also change the first line to the following: