We Keep Coding

html buttons change div content or toggle it again

I'd like to know how to create buttons which can change the content inside a div and if the last clicked button (actual content) is clicked again instead of change it should clear the div.
So far I got the code to create and change the content like this:
HTML
<button onclick="changeNavigation('bl1')">Techniker</button>
<button onclick="changeNavigation('bl2')">Übersetzer</button>
<button onclick="changeNavigation('bl3')">Qualitychecker</button>
<div id="text_content"></div>
<div id="bl1">
<p>This is text 1</p>
</div>
<div id="bl2">
<p>This is text 2</p>
</div>
<div id="bl3">
<p>This is text 3</p>
</div>
JS
function changeNavigation(id) {
document.getElementbyId('text_content').innerHTML= document.getElementbyId(id).innerHTML;
}
With this code so far I can make the content inside the div change by clicking the bottons. But once the box has been filex I can only change the inside content. If I click the button from the actual content again nothing happens but I'd like to clear the content.
Can maybe anyone explain me or link me the name of such a funtion?
Thanks in advance!

Im not really sure what you're trying to get here? If you click a nav item twice to clear the div?
If so try something like this
function changeNavigation(id) {
var textContent = document.getElementbyId('text_content'),
containerDiv = document.getElementbyId(id);
if(textContent.innerHTML === containerDiv.innerHTML){
textContent.innerHTML = '';
} else {
textContent.innerHTML = containerDiv.innerHTML
}
}
What we're doing here is checking if the text_content is the same value as the div you're getting the content from. if so then empty it.

How to toggle specific divs with jquery

Okay so I have a very limited amount of knowledge with this and I can not find my answer anywhere. What I am trying to do is create multiple buttons that toggle information. So when the first toggle is clicked div 1 is toggled, when i click the second toggle div two opens and preferably div 1 closes. My code is very basic I am very new to this. Right now no matter what values I input into the toggle area both divs close. Thank you and I hope this makes sense.
Here is my code:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div.house").toggle();
});
});
</script>
<button>Toggle</button>
<div class="house">
<p>SAMPLE TEXT ETC...</p>
</div>
<button>Toggle</button>
<div class="tumble-by">
<p>SAMPLE TEXT ETC...</p>
</div>

You can select the next sibling:
$("button").click(function(){
$(this).next().toggle();
});
In the above code, JavaScript this keyword refers to the clicked element. $(this) creates a jQuery collection and .next() method selects the very next sibling of the collection's element.

I agree too, that first you need to hide all divs:
$("button").click(function () {
$('div').hide();
$(this).next().toggle();
});

<script>
$(document).ready(function () {
$(document).on("click", ".js-toggle__button", function (e) {
$(".js-toggle__text").hide();
$(this).next(".js-toggle__text").show();
});
});
</script>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 1 ETC...</p>
</div>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 2 ETC...</p>
</div>
It's better to use uniquely defined identifiers when you accessing elements from JS (and don't use them for CSS — use separate names).
Your HTML code some day can be changed dramatically and JS will work anyway because it depends on identifiers but not on structure or on tag names.

Display hidden object from another div

I'm having a little trouble here and hopefully someone can give me a hint on what I'm doing wrong. The object within the main div is hidden and I need it show when I click the button within the secondary div. I'm getting the secondary div to "close" after the button is clicked but I just can't seem to figure out how to make the "checked" object to show.
Here is the HTML:
<div class="separate">
<div class="main">
<h1>Mechanical Room</h1>
<object class="checked"></object>
</div>
<div class="secondary">
<div class="heading">
<h2>Mechanical Room</h2>
<button class="check-in">Check In</button>
<object></object>
</div>
</div>
</div>
And here is my jQuery code:
$(document).ready(function() {
$(".check-in").click(function () {
$(this).closest(".separate").children(".secondary").fadeOut(200);
$(this).closest(".separate").children(".main").find("object").show();
});
});

If your div is set to hidden by visibility then show() method won't show demo
You need to set .css('visibility','visible'); then.
$(document).ready(function() {
$(".check-in").click(function () {
$(this).closest(".separate").children(".secondary").fadeOut(200);
$(this).closest(".separate").children(".main").find("object").css('visibility','visible');
});
});

It is working just fine in my fiddle.
Did you style your object?
Did you make sure it's hidden initially?
$("object").hide();
I added [THE OBJECT] as it's content to see it.
<object class="checked">[THE OBJECT]</object>
Demo: http://jsfiddle.net/u6x84/

jQuery: by click on div show text in textarea

I am pretty new to JavaScript and hope someone can help me to find a solution for the following:
I have a div with some text in it and an onclick event.
How can I manage that when you click on the div it shows the text inside the div within a textarea and a button above it - similar to how you can edit your own comments on this page here ?
How it looks on default:
<div class="clickable" onclick="TheFunctionIamLookingFor()">Some awesome text.</div>
How it should look on click:
<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">Some awesome text.</textarea>
Many thanks for any help with this, Tim

Try this
function youAreLookingFor() {
var awesomeText = $(this).html();
var $form = $(this).parent();
$(this).remove();
var textArea = '<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">'+ awesomeText +'</textarea>'
$form.append(textArea);
}
If you mean to give a different myBtn and myArea name for each clickable link, then you should give the clickable div an id too and start from there to create the id for the textarea and the button.

There is another way out to make what you want i.e. to make editable div using an HTML property contententeditable=true. You may use the following syntax:
<div contenteditable=true>
contents here
</div>
This facilitates copy+paste image in the div as well as textual edits i.e applying fonts on the texts using keyboard shortcut etc.
Check this fiddle

If you want to use only javascript DOM elements , then
<html>
<head>
<style>
.dip
{
display:none;
}
.dip1
{
display:;
}
</style>
<script>
function TheFunctionIamLookingFor()
{
document.getElementById("myArea").className="dip1";
document.getElementById("myBtn").className="dip1";
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<div class="clickable" onclick="TheFunctionIamLookingFor()" >Some awesome text.
<button class="dip" id="b1" type="button" id="myBtn">BtnName</button>
<textarea class="dip" id="myArea">Some awesome text.</textarea>
</body>
</html>

onclick alert jquery html javascript

I have a page so far with:
<div id="x1">Text paragraph 1<link here></div>
<div id="x2">Text paragraph 2<link here></div>
<div id="x3">Text paragraph 3<link here></div>
Where link here is like
google
What I am trying to do is add a link to the bottom of each paragraph of text so that when it is clicked it displays an alert with the div id of that text block.
So for example, if someone clicks on the link at the bottom of text paragraph 2, then they will get an alert saying "x2".
So far, I have only been able to think of a way involving an onclick event for each link in each div. But with 100 paragraphs this could become quite a lot and is messy code.
like
$('#x1').onclick(function(){
alert('x1');
});
How can I do this better?
The page is generated with php so I could put the div id's anywhere in that text block area (even make a new div around the link if required)...
EDIT - Many good answers, I don't know which to pick as best. I actually ended up using Loongawas for my purpose as its easy to make for my beginner level in php.
<div id='a1'>This text <a href="" onclick=tomato(1)>test</a>
</div>
<div id='a2'>This text <a href="" onclick=tomato(2)>test</a>
</div>
<div id='a3'>This text <a href="" onclick=tomato(3)>test</a>
</div>
and
function tomato(test){
alert(test);
};
Some of the others are incredibly interesting as they use higher functions. I'm going to spend the rest of the day looking into them. Thanks to all.

use jQuery's live or delegate functions:
$('div a').live('click', function(ev){
alert($(this).closest('div').attr('id'));
});
The benefit to the live/delegate functions is that there's actually only a single event on the entire page for this (as opposed to one event per link). If you add more links dynamically, this still works without having to attach more events.
The difference between live and delegate is that delegate is specific to a part of the page. If, for instance, you wrapped all of these DIVs in another div, the call would look like:
$('#wrapperDiv').delegate('a', 'click', function(ev){ ...
The advantage to this is that the internal jQuery code that checks to see if the click matches the selector only runs on clicks inside of #wrapperDiv instead of clicks anywhere on the page.

You could make a javascript function that takes a variable and then pass the paragraph number to the function. If the paragraph was number two you could call
myfunction(2);
or is the number not the problem?

$('#x1, #x2, #x3').click(function(){
alert($(this).parents().attr("id"));
});
EDIT:
Better version:
HTML:
<div class="x">Text paragraph 1<link here></div>
<div class="x">Text paragraph 2<link here></div>
<div class="x">Text paragraph 3<link here></div>
$('.x a').click(function(){
alert($(this).parents().attr("id"));
});

Have you considered using a class to name them all as opposed to explicit ids?
<div class="x">Text paragraph 1<link here></div>
<div class="x">Text paragraph 2<link here></div>
<div class="x">Text paragraph 3<link here></div>
so then you would be able to use a single click event for all of them?
$(".x a").click()
{
//Use $(this) to refer to the clicked item.
alert($(this).parents().attr("id"));
});

$('.myDivs').click(function(){
alert($(this).parent().attr("id"));
});
Or select the divs in some other way:
$('#x1').parent().children('div').click(...);

Something along these lines should work:
<div id="x1">Text paragraph 1 <a href='google.com'>google.com</a></div>
<div id="x2">Text paragraph 2 <a href='google.com'>google.com</a></div>
<div id="x3">Text paragraph 3 <a href='google.com'>google.com</a></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>
$('a').click(function() {
alert($(this).parent().attr('id'))
return false
})
</script>

Add a class to each div, so you can select all of 'em at once.
<div id="x1" class="x">Text paragraph 1 <a>Click</a></div>
<div id="x2" class="x">Text paragraph 2 <a>Click</a></div>
<div id="x3" class="x">Text paragraph 3 <a>Click</a></div>
Then you can do:
$('div.x a').live('click', function(e){
e.preventDefault();
alert($(this).closest('div.x').attr('id'));
});
http://jsfiddle.net/VGh3X/1/

A better approach to this is to make all of the clickable areas share something in common that you can use as a selector. For example, if all of the clickable divs had class='click', you'd be able to select them all using $('.click') and bind to that.
$('.click a').bind('click', function() {
var div = this.closest('.click');
alert(div.attr('id'));
return false;
});

$(document).ready(function() {
var links = $("div[id^='x'] a"); //get the a tags
$.each(links, function(i,v) {
$(v).click(function() { //bind on click
alert(v.parentNode.id); //alert div id
return false; // stop
});
});
});