Develop Reference

How to select prev no to related element jquery

I would like to slide divs, all of them will have same id because they'll generate inside loop so also trigger has same id. That's why I want to use one function, at the moment function works only for first div and I have no idea how to fix it. I would like that each button would work for div above him.
html part
<div id='slide'>
hello
</div>
<p id='but'>click</p>
<div id='slide'>
hello
</div>
<p id='but'>click</p>
and the js
$(document).ready(function(){
$(this).click(function(){
$("#slide").slideToggle("slow");
});
});

First of all, don't have same ids on one page - use classes instead. If you want to do something with the element before clicked item, you can use prev(), something like this (in your code just change css('color', 'red') to slideToggle("slow"), I have added it just for example):
$(document).ready(function() {
$(".but").click(function() {
$(this).prev().css('color', 'red');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='slide'>
hello
</div>
<p class='but'>click</p>
<div class='slide'>
hello
</div>
<p class='but'>click</p>

Few issues:
Use classes not IDs and use the ID of the click element #but instead of this for your click function
<div class='slide'>
hello
</div>
<p class='but'>click</p>
<div class='slide'>
hello
</div>
<p class='but'>click</p>
$(document).ready(function(){
$('.but).click(function(){
$(".slide").slideToggle("slow");
});
});

Is there a way of putting the text of a div in another div on click?

Is there a simple way of putting the text of a div in another div on click? I did it before with inputs, but I used .val().
<div id="someText"> Hello </div>
<div id="putHere"> </div>
I'm glad for help, Thanks!

You are looking for .text():
$(document).ready(function() {
$('#click,#div2').on('click',function() {
$('#div2').text($('#div1').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Foo</div>
<div id="div2">Bar</div>
<button id="click">Click</button>

This is a pure Javascript solution if you are interested :
document.getElementById('someText').onclick = function(){
document.getElementById('putHere').textContent = document.getElementById('someText').textContent;
};
<div style='background:red' id="someText"> Hello </div>
<div style='background:blue' id="putHere"> </div>
Update: Removed Button since the OP didn't need one. Now click on the red div and blue div will be populated

With jQuery !
Click Event on div
$(document).ready(function (){
$("#someText").on("click", function (){
$("#putHere").text($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText"> Click Me! </div>
<div id="putHere"> </div>
Click Event on Button
$(document).ready(function (){
$("#btn").on("click", function (){
$("#putHere").text($("#someText").text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText"> Hello World! </div>
<div id="putHere"> </div>
<button id="btn">Click ME !</button>
Pure JS
Click Event on button
document.getElementById("btn").onclick = function() {
document.getElementById("putHere").innerHTML = document.getElementById("someText").innerHTML;
};
<div id="someText">Hello World!</div>
<div id="putHere"></div>
<button id="btn">Click ME !</button>
Click Event on div
document.getElementById("someText").onclick = function() {
document.getElementById("putHere").innerHTML = document.getElementById("someText").innerHTML;
};
<div id="someText">Click Me!</div>
<div id="putHere"></div>

This should work
$('#putHere').text($('#someText').text());

$("button").click(function() {
$("#putHere").html($("#someText").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText"> Hello </div>
<div id="putHere"> </div>
<button>Click</button>

slideToggle multiple divs

I've this code
jQuery(function ($) {
//After it toggle the content with this button
$('.content_toggle').hide();
$(".link-toggle").click(function () {
$(this).nextAll(".content_toggle").slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="link-toggle">Read more</div>
<div class="content_toggle">
Hello world
</div>
<div class="link-toggle">Read more again ?</div>
<div class="content_toggle">
Another Hello world
</div>
I want to toggle these content one by one,
Like when I click on the first div, its following content toggle.
Then If if click on the second div, its following content toggle.
Not the two at the same time.

Change your nextAll to a next to only target the immediately following class not every class below it
$(this).next(".content_toggle").slideToggle("slow");

give them id and use their ids to toggle
jQuery(function ($) {
//After it toggle the content with this button, and use next instead of nextAll
$('.content_toggle').hide();
$("#myfirstDiv").click(function () {
$(this).next(".content_toggle").slideToggle("slow");
});
$("#mysecondDiv").click(function () {
$(this).next(".content_toggle").slideToggle("slow");
});
});

Wrap
<div>
<div class="link-toggle">Read more</div>
<div class="content_toggle">
Hello world
</div>
</div>
in a <div>.
Then use the siblings method:
$(".link-toggle").click(function () {
$(this).siblings(".content_toggle").slideToggle("slow");
});
});

Don't use nextAll, just use next.
jQuery(function ($) {
//After it toggle the content with this button
$('.content_toggle').hide();
$(".link-toggle").click(function () {
$(this).next(".content_toggle").slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="link-toggle">Read more</div>
<div class="content_toggle">
Hello world
</div>
<div class="link-toggle">Read more again ?</div>
<div class="content_toggle">
Another Hello world
</div>

It is doing exactly what you said it should do. This "nextAll" is going to perform the action in all subsequent siblings. See doc: https://api.jquery.com/nextAll/
Don't use nextAll, but simply next to obtain the desired effect.

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>

Toggle single Div layer using jQuery

At runtime I have a loop that creates a number of divs with the same class depending on the number in the database.
<div class="show">....</div>
<div class="show">....</div>
<div class="show">....</div>
I want to display this div using the slideToggle() function with jQuery. For each of these I have a separate hyperlink which when clicked should display the div. Also there are a number of tags in between the hyperlink and the div that I want to toggle.
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
$(function () {
$(".display").click(function(){
$(".show").slideToggle();
return false;
});
});
Naturally when this is called each div layer is toggled, regardless of which hyperlink is clicked. I want to just toggle the div closest to the given hyperlink.
Thanks in advance.

Find the <div> relatively by going from this using tree traversal functions, like this:
$(function () {
$(".display").click(function () {
$(this).next().slideToggle();
return false;
});
});
In this case since it's the next sibling element we care about, use .next(), if the structure is different from the question, you'll need to adjust it accordingly, go get from the <a> you clicked on (this) to the <div> you want to toggle.

$(function () {
$(".display").click(function () {
$(this).next.(".show").slideToggle();
return false;
});

Or while you loop through creating your divs, can you add (for example) a rel value that's incremented by one every time? Giving you something like...
View
<div class="show" rel="1">....</div>
View
<div class="show" rel="2">....</div>
View
<div class="show" rel="3">....</div>
This would then link the two divs so that you could get the rel value of your clicked element and use that to identify the shown / hidden div.
<script type="text/javascript">
$(function () {
$(".display").click(function () {
var element_id = $(this).attr('rel');
$(".show").attr('rel', element_id).slideToggle();
return false;
});
});