Develop Reference

JQuery toggle/html: changing the content in div

I'm currently working on a blog layout with a main div and a side bar with links. I want each link to change the content of the main div.
I tried using toggle and html.
Here's the main class and the content of each link:
<div id="main"></div>
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
And the side bar:
<div id="mainlink">
<button class="linkd" id="butt1"> works </button>
<button class="linkd" id="butt2"> info </button>
<button class="linkd" id="butt3"> Tags </button>
</div>
So when I click on the button "works" I want the content of that div into the main div.
Here's the snippet of the JQuery (that doesn't work):
$(function(){
$('#butt1').click(function() {
$('#main').html($('#works'));
$('#works').toggle();
$('#info').hide();
$('#tags').hide();
});
$('#butt2').click(function() {
$('#main').html($('#info'));
$('#info').toggle();
$('#works').hide();
$('#tags').hide();
});
$('#butt3').click(function() {
$('.mainp').html($('#tags'));
$('#tags').toggle();
$('#info').hide();
$('#works').hide();
});
});
Note: on my CSS I have the display: none as well.

I think it is the easy way to show and hide divs, by assigning a relation to the buttons using HTML5's data attribute (here their ids are used in data-target attribute). See the snippet below...
$(function(){
$('[data-target]').on('click', function(){
var target = $(this).data('target');
$(target).siblings().hide().end().show();
});
});
#main > div:not(:first-child) {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainlink">
<button class="linkd" data-target="#works"> works </button>
<button class="linkd" data-target="#info"> info </button>
<button class="linkd" data-target="#tags"> Tags </button>
</div>
<div id="main">
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
</div>

JQuery - Show multiple divs

I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>

You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}

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

Can't get div to hide by id not class

I'm trying to simply hide something when the page loads...I'm actually going to have quite a few things hidden eventually, but right now I can get this to hide. I've scrolled some of the answers I've found on SO, but can't get it working. I have to keep the .jumbotron class for css so I simply added an id onto it...........not sure if that's the problem or what....here's my code. I left out the beginning as nobody really needs to see that.
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div>
<div id="second_slide" class="jumbotron" >
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div>
<hr>
<!-- Example row of columns -->
<div class="row-fluid">
<div class="span4">
</div>
</div>
<hr>
<div class="footer">
<p>© Company 2013</p>
</div>
</div> <!-- /container -->
<script>
//doesn't work
$(document).ready(function(){
$('.jumbotron #second_slide').click(function(){
var index=$('.jumbotron #second_slide').index(this);
$('.jumbotron #second_slide').hide();
});
});

It doesn't work because there is no element with an ID of 'second_slide' inside an element with a class of 'jumbotron'.
Try this:
$('.jumbotron#second_slide').hide();

Try this
<div class="jumbotron">
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
<div id="second_slide" class="jumbotron" >
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div></div>

Try
$('#second_slide').click(function(){
var index=$('#second_slide').index(this);
$(this).hide();
});

It looks like the problem is the selector in $('.jumbotron #second_slide'). All you need is the id: $('#second_slide').
$('.jumbotron #second_slide') is trying to find an element with id="second_slide" within the class="jumbotron" divs.

Did you read http://api.jquery.com/category/selectors/ ? Writing something like .clazz #id you actually want to search for the id inside .clazz. You should probably iterate through those jumbotrons and select one you're interested in, then extract that component.

I'll have a go:
$(function(){
$('#second_slide').click(function(){
$(this).hide();
});
});
That's the entire <script> element.

Javascript click specific to ID

I have a div setup like so:
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
I have the following code:
$('.show-comments').click(function(e){
e.preventDefault();
$('.comments-wrapper').slideToggle('slow');
});
As you would assume, the code works but on a class basis. I'd like for it to open up only the .comments-wrapper of its associated id (i.e. open slideToggle comments2 if content 2 button is clicked and so on and so on).
How would I do this?

$('.show-comments').click(function(e){
e.preventDefault();
$(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});
Note that this is dependent on the .content element being immediately followed by the .comments-wrapper.
If you have access to modify the html itself, I would suggest adding a wrapper element and then doing the following to avoid the reliance on the exact order of elements:
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
</div>
$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');
This way, if you add an element between the .content and the .comments-wrapper it does not break the code.

You can do this:
$(this).parent("div").next('.comments-wrapper').slideToggle('slow');
This will find the related div of class .comments-wrapper and slide toggle.
And a fiddle: http://jsfiddle.net/xCJQB/

$('.show-comments').click(function (e) {
e.preventDefault();
var num = this.id.match(/\d+$/)[0];
$("#comment" + num).slideToggle('slow');
});
Demo ---> http://jsfiddle.net/7pkyk/1/

Use this context
$(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');
If it is not the immediate element then you might try this as well
$(this).closest('.comments')
.nextAll('.comments-wrapper').first().slideToggle('slow');

you can add a common class to associate a button with a div.
html:
<div class="content">
<button class="show-comments group1" id="content1"></button>
</div>
<div class="comments-wrapper group1" id="comment1">1</div>
<div class="content">
<button class="show-comments group2" id="content2"></button>
</div>
<div class="comments-wrapper group2" id="comment2">2</div>
javascript:
$('.show-comments').click(function(e){
var associate = $(this).attr('class').match(/group\d+/).pop();
var selector = '.comments-wrapper.' + associate;
e.preventDefault();
$(selector).slideToggle('slow');
});
http://jsfiddle.net/uMNfJ/