Develop Reference

How to get text for div close to button clicked

I'm trying to get the text of some div within the parent div where button is clicked. This is an example code
<div class="parentDiv" >
<div id="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div id="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Here parentDiv is repeated couple of times and text of divToFind is different in each parentDiv. Whenever remove button is clicked within the parentDiv I want to get the text of divToFind.
I have tried this
$(this).closest('.parentDiv').children('#divToFind').text();
But nothing is returned

Don't use same IDs in a single document. You should use classes instead. With class, it works fine.
It is mentioned in the spec that there must not be multiple elements in a document that have the same id value.
$(function(){
$("button").on("click", function(){
var t = $(this).closest('.parentDiv').children('.divToFind').text();
console.log(t);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>

Yes, Its true, you should not use same Id for 2 elements in an HTML document, However following is the code that can help you to get the text of the div given.
There are 2 ways:
$(this).parent().prev('#divToFind').text();
$(this).parent().prev().text();
prev and next allows us to traverse on the same level. You can provide selectors inside that to get particular element.
In your example its ID, you can update Id to some css class, so that you dont have to have elments with same ID.

jQuery function to check next div is visible and hide current div on click

I am trying to write a jQuery function that will fire on a new div being made visible elsewhere in the script. The function will then hide only the div (with a different classname) immediately preceding the current one.
So far I have the following:
$(".next-question-button").on('click', function (e) {
if ($('.question-bar').next().css('display', 'block');) {
$(this).('.question-bar').hide();
}
});
HTML:
<div class="question-bar">Question 1</div>
<div class="question-div">
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>
<div class="question-bar">Question 2</div>
<div class="question-div">
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>
<div class="question-bar">Question 3</div>
<div class="question-div">
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>
My thinking was that if the next question button is clicked the new div would be made visible and then the 'div.question-bar' that immediately precedes the new div would be hidden?
The new div is a sibling to the div.question-bar, but there are several of both through out the document. So when a the new div is made visible I just want the previous div (with class name question-bar) to be hidden?
What's the best way to approach this? Thanks in advance

As you'll find on many SO questions, .next gives the very next element, regardless of its class. If you add a class, it's still the next one, but only if that next one matches the filter otherwise null - it doesn't continue until it finds a matching element, that would be .nextAll(".class").first().
This also applies to .prev
So, if you're using .next/.prev, then there's no need to worry about "but there are several of both through out the document".
Your current process is:
click button
find next div, show that div
from that div (the next one), find the previous one and hide it
you already know the previous one as it's the one you've just clicked the button within.
So instead:
click button
hide the divs for the button
show the next ones
ie, for this html:
<div class="question-bar">Question 1</div>
<div class="question-div">
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>
<div class="question-bar">Question 2</div>
<div class="question-div">
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>
you get:
$(".next-question-button").on("click", function() {
// get the container for this button
var div = $(this).closest(".question-div");
// hide this container as we're moving on to the next question
div.hide();
// also hide the question 1 bar
div.prev().hide();
// show the next question bar and div
// .next() is applied at the .question-div level so gives the next .question-bar (no filter required)
div.next().show();
// it goes bar-div-bar-div so at the first bar, the second bar is next/next
// this will *not* work: div.next(".question-div")
div.next().next().show();
// an alternative that will work and may be better than .next.next
//div.nextAll(".question-div").first().show();
});
where .closest finds the containing question bar.

Something like this ?
$(function() {
$(".next-question-button").on('click', function() {
$parent = $(this).parents('.question-div');
$parent.hide();
$parent.prev('.question-bar').hide();
$parent.next('.question-bar').show();
$parent.next('.question-bar').next('.question-div').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question-bar">Question 1</div>
<div class="question-div">
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>
<div class="question-bar">Question 2</div>
<div class="question-div">
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>
<div class="question-bar">Question 3</div>
<div class="question-div">
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>

How to add a fadeIn effect revealing a hidden div

With the help of other members I have the following code that allows to show and hide divs one at a time.
If I click on a button it will show the corresponding div and if I click on another button, the previous div goes away and the next will show.
However, when I click on a button to show a div, it does not have any transition or timing effect. It shows up immediately
If in the function I add a timing like this.. $(id).show(800); It will have the transition or fadeIn effect, but if someone click on a button to show the div and click on the same button again to hide it, the div will go away and return right back.
Can someone help me to add that transition or fadeIn on a way that if the button is clicked to hide the div it will stay hidden?
This is what I have:
<p class="btn" onclick="toggleDivs('#div1');">Show div1</p>
<p class="btn" onclick="toggleDivs('#div2');">Show div2</p>
<p class="btn" onclick="toggleDivs('#div3');">Show div3</p>
<p class="btn" onclick="toggleDivs('#div4');">Show div4</p>
<div class="fadeOut" id="div1" style="display:none"; >
<div class="fadeOut" id="div1" style="display:none"; >
<div class="container">
<p>This is the content of div1</p>
</div>
<div class="fadeOut" id="div2" style="display:none"; >
<div class="container">
<p>This is the content of div2</p>
</div>
<div class="fadeOut" id="div3" style="display:none"; >
<div class="container">
<p>This is the content of div3</p>
</div>
<div class="fadeOut" id="div4" style="display:none"; >
<div class="container">
<p>This is the content of div4</p>
</div>
var toggleDivs = function (id) {
$(".fadeOut").hide(800);
$(id).show();
}

you should disable all buttons untill the end of the animation:
var toggleDivs = function (id) {
$('.btn').attr('disabled', true)
$(".fadeOut").hide(800, function() {
$(id).show(800, function() {
$('.btn').attr('disabled', false);
});
});
}
I suggest you add another class to your buttons that are going to be disabled in order to not disable all buttons with class btn in the DOM.

how to select the closest next all elements

Here is the html content, which i cannot change:
<button class="out">out</button>
<div class="in">in1</div>
<div class="in">in2</div>
<div class="in">in3</div>
<button class="out">out</button>
<div class="in">in1</div>
<div class="in">in2</div>
<div class="in">in3</div>
<div class="in">in4</div>
<div class="in">in5</div>
<button class="out">out</button>
<div class="in">in1</div>
<div class="in">in2</div>
<div class="in">in3</div>
<div class="in">in4</div>
So what I should do is click the out button and then hide its content "below"
But they are with the same class, I dont know how to select them respectively.
Here is the fiddle: FIDDLE

Try to use .nextUntil() in this context,
$('.out').click(function(){
$(this).nextUntil('.out').hide();
});
DEMO
And the following demo would guide you to how to toggle those elements,
DEMO I

toggle hide javascript function

I have a div with two divs inside that I want div A to show, with the other hidden. by default I want div A to show
<div id="0">
<div id="A">this is A</div>
<div id="B">this is B</div>
</div>
<div id="1">
<button1>this is 1</button>
<button2>this is 2</button>
</div>
Separate to this is the buttons to action it.
Here is where I got with the javascript:
$(document).ready(function() {
$('.toggle').hide();
$('a.togglelink').click(function() {
$('.toggle').hide();
$(this).parent().next('.toggle').toggle();
return false;
});
});

EXAMPLE
HTML
<div>
<div id="divA" class="toggle">this is A</div>
<div id="divB" class="toggle">this is B</div>
</div>
<div>
<button value="divA">this is 1</button>
<button value="divB">this is 2</button>
</div>
JavaScript
showHideDivs("divA");
$("button").on("click", function(){
showHideDivs(this.value)
});
function showHideDivs(id){
$(".toggle").hide();
$("#" + id).show();
}
Edit: #ShowcaseImagery - I realized that this question was asked specifically for bootstrap and that my solution is more of a JS/jQuery implementation. If you need similar functionality and you're using bootstrap you should look into the collapse accordions. The collapse documentation should outline how to do this correctly.

div0 and div1 is not valid XHTML. I'm guessing that's where your problem is. Instead use the id tag like so:
<div id="div0">YOUR STUFF HERE</div>
<div id="div1">MORE STUFF HERE</div>