Develop Reference

Change Title's content on tab click

I have a little problem. I want to change my page title when I click on 1 of 5 tabs that I have on my page. The title of that page should change based on what tab was clicked. If would go something like this:
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>
<div id="tab5"></div>
When clicked on tab1, title should change to "tab1, when clicked on tab2, title should change to tab2 and so on...
I tried with this jquery, but it didn't work. :)
<script type="text/javascript">
$(document).ready(function (){
('#tab2').click(function ()}{
(document).title ('tab2');
})
});
Can you please help me with that?
Thank you....

Try this
<div class="change-title" id="tab1">1</div>
<div class="change-title" id="tab2">2</div>
<div class="change-title" id="tab3">3</div>
<div class="change-title" id="tab4">4</div>
<div class="change-title" id="tab5">5</div>
<script>
$(document).ready(function() {
$('.change-title').on('click',function(){
document.title = $(this).attr('id');
});
});
</script>

An elegant solution could also be if you would make use of the data() method in jQuery. Then you could simply define your preferred title for each tab that should be displayed in the title tag and it's not bounded anymore to the name of your id.
HTML
<div id="tab1" data-title="Tab 1"></div>
<div id="tab2" data-title="Tab 2"></div>
<div id="tab3" data-title="Tab 3"></div>
<div id="tab4" data-title="Tab 4"></div>
<div id="tab5" data-title="Tab 5"></div>
jQuery
$("div").click(function(){
document.title = $(this).data("title");
});

Pure Js I can give you short version also
function changeTitle(pagetitle){
document.title = pagetitle;
}
document.getElementById('tab1').onclick = function(){changeTitle("tab1")};
document.getElementById('tab2').onclick = function(){changeTitle("tab2")};
document.getElementById('tab3').onclick = function(){changeTitle("tab3")};
document.getElementById('tab4').onclick = function(){changeTitle("tab4")};
document.getElementById('tab5').onclick = function(){changeTitle("tab5")};
<div id="tab1">A</div>
<div id="tab2">B</div>
<div id="tab3">C</div>
<div id="tab4">D</div>
<div id="tab5">E</div>

Bootstrap 3 collapsible panel without id or data

I need to handle panel collapse behavior without using ID or data attributes. Ideally by setting a "collapsible" class on the parent div that can collapse its content, and a click on the heading should trigger the collapse
Here's the target HTML I'd like to write to handle collapse behavior automatically
<div class="panel-group collapse-all-but-one">
<div class="panel panel-primary panel-collapsible>
<div class="panel-heading">Click me to collapse</div>
<div class="panel-body">I will collaaaaaaapse</div>
</div>
<div class="panel panel-warning panel-collapsible">
<div class="panel-heading">Hey another one</div>
<div class="panel-body">I will close when the other one opens</div>
</div>
</div>

Here's my magic piece of code (the ready stuff ensures compatibility with rails/angularJS)
var ready
ready = function(){
$(".panel-collapsable")
.children(".panel-heading")
.click(function(){
var group = $(this).parent().parent()
if (group.hasClass("panel-group one-at-a-time")){
group.children(".panel").children(".panel-body")
.collapse('hide')
}
$(this)
.next('.panel-body')
.collapse('toggle')
})
}
$(document).ready(ready);
$(document).on('page:load', ready);
Remember to add some bootstrap classes like .collapse .in or .collapsed to initialize correct behaviour or the first click isn't going to do anything.
<div class="panel-body collapse in">I am expanded on page load</div>
...
<div class="panel-body collapse">I am collapsed on page load</div>

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/

JqMOBI change 'about button' target

You have the facility for a button in the jqMOBI header bar. I would like this to have a different target depending on what page you are on. I can't seem to find a event for the end of a page transition. So The only way I can see to do this is to add a function to each tap which seems a bit OTT.
The header looks like this..
<div id="header">
About
</div>
Any suggestions or an efficient method to keep track of the active hash and change the target of the button?

i see 3 solutions:
1.Specify a custom header block for each panel, and link them by adding data-header='main-header' to each panel div. e.g.
Note: For some reason, Stackoverflow is having trouble formatting my answer so i've included the fiddle as reference http://jsfiddle.net/JeEMf/ **
<div id='page1' class='panel' data-header='page1-header'>page 1</div>
<div id='page2' class='panel' data-header='page2-header'>page 2</div>
<div id='page1-header'>
<a href='#About1' class='button' style='float:right'>About Page 1</a>
</div>
<div id='page2-header'>
<a href='#About2' class='button' style='float:right'>About Page 2</a>
</div>
2.Specify a custom function to run on all panel change/loads. Similar to #1, add data-load='MyOnPageLoadFunc' to all panel divs. (see the jqMobi kitchensink demo for the function 'loadedPanel'. That's basically the solution) e.g.
<div id='global-header'>
<a id='global-header-href' href='#About' class='button' style='float:right'>About</a>
</div>
<div id='page1' class='panel' data-load='MyOnPageLoadFunc'>page 1</div>
<div id='page2' class='panel' data-load='MyOnPageLoadFunc'>page 2</div>
then create this function
function loadedPanel(pageDiv){
var href = '';
switch (pageDiv){
case 'page1': href='#about1';
break;
case 'page2': href='#about2';
break;
case 'page2': href='#about2';
break;
default : href='#about';
}
$('#global-header-href').attr('href', href);
}
3.Same as #2, but add your own custom 'data-' attribute for the header. e.g. data-header-link='#about' to all panel divs. e.g.
<div id='global-header'>
<a id='global-header-href' href='#About' class='button' style='float:right'>About</a>
</div>
<div id='page1' class='panel' data-load='MyOnPageLoadFunc' data-header-link='#about1'>page 1</div>
<div id='page2' class='panel' data-load='MyOnPageLoadFunc' data-header-link='#about2'>page 2</div>
<div id='page3' class='panel' data-load='MyOnPageLoadFunc' data-header-link='#about3'>page 3</div>
then create this function
function loadedPanel(pageDiv){
var href = $('#'+pageDiv).data('header-link');
$('#global-header-href').attr('href', href);
}

Jquery div expands all divs on page

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
jQuery(".link").click(function()
{
jQuery("div.content").slideToggle(500);
});;
});
</script>
How to expand only the div which is linked to the specific link?
Edit:
Its done like this
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
<div class="content">
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
</div>

EDIT 2:
You changed your HTML. Now do this:
jQuery(this).closest('div.comment').next('div.content').slideToggle(500);
But wait! Now you have 2 different div.link elements in different relation to .content elements. Is this your actual HTML markup?
You could also do this:
jQuery(this).closest('div.content').slideToggle(500);
Please provide your actual HTML.
EDIT:
Based on updated question, do this:
jQuery(this).parents('div.blaat1').eq(1).next().slideToggle(500);
How to expand only the div which is linked to the specific link?
How are they linked?
If the div is a descendant, do this:
jQuery(this).find('div.content').slideToggle(500);
If the div is a an ancestor, do this:
jQuery(this).closest('div.content').slideToggle(500);
If the div is the next sibling, do this:
jQuery(this).next().slideToggle(500);
If the div is the previous sibling, do this:
jQuery(this).prev().slideToggle(500);
Without seeing your HTML structure, we can only guess at the solution.

For this HTML:
<div class="blaat1">
<div class="blaat1">
<a class="link">#</a>
</div>
<div class="blaat2">
<a class="link">#</a>
</div
</div>
<div class="content">
<div class="otherdivs">
<div class="blaat1_div"><p>Hi – I'm blaat 1</p></div>
<div class="blaat2_div"><p>Hi – I'm blaat 2</p></div>
</div>
</div>
Use this JS:
<script type="text/javascript">
$(document).ready(function() {
$(".content").hide();
$(".link").click(function() {
var blaat = $(this).parent().attr("class");
$(blaat+"_div").slideToggle(500);
});;
});
</script>
I haven't tested that, but it should work.

Try this:
$(".link").click(function(){
$(this).parents('div.content').slideToggle(500);
});;