Develop Reference

Link to an element which is inside of a bootstrap collapse element

I have a link outside of a collapse element to an anchor inside of the collapsed content.
See my plnkr example.
If I collapse the panelat the bottom the anchor tag is not executed anymore. What I want to implement is the following:
If I click on an anchor which is currently not visible (because it is e.g. in an collapsed area), then I want to extend the containing area and then apply the link.
Any ideas how I could accomplish this?
Thanks a lot

$(function(){
$(document).on('click', 'a[href^="#"]', function(ev){
var targetId = $(ev.target).attr('href'),
$target = $(targetId);
$target.parents('.collapse').addClass('in').css({height: ''});
});
})
Like this? http://plnkr.co/edit/R2Fjsz9JnLkWEvFKUaAg?p=preview

// open collapsed items when clicking on the corresponding link
$(document).on('click', 'a[href^="#"]', function(ev){
var targetId = $(ev.target).attr('href'),
$target = $(targetId);
$target.parents('.collapse').addClass('show');
});
Same as accepted answer but for usage with Bootstrap Collapse elements

jQuery newsitems hide and collapse

I am using a nice script to hide and show several divs
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.active').removeClass('active');
// Add the 'active' class to this link:
$(this).addClass('active');
// Hide all the content:
$('.content').hide();
// Show the requested content:
$('#' + content).show();
});
This works great on a single div with several items I like to hide.
But I use a template the retrieves news items and I like to make this work on all the divs induvidual. Also hide the second div by default.
<div class="content" id="div[[+idx]]-1">
<p>Show content by default</p>
<a class="link-[[+idx]]" href="#" rel="div[[+idx]]-2">
Link to show div id="div[[+idx]]-2" and hide id="div[[+idx]]-1"
</a>
</div>
<div class="content hide" id="div[[+idx]]-2">
<p>Hide content by default</p>
<a class="link-[[+idx]]" href="#" rel="div[[+idx]]-1">
Link to show div id="div[[+idx]]-1" and hide div id="div[[+idx]]-2"
</a>
</div>
Problem is I use this template for every iteration and the script does not support an undefined number of items and closes all my other divs. As does the second div does not hide on default.
I changed the link to link1 and then you get the follwoing unwanted bahavior:
http://jsfiddle.net/Vh7HR/8/
if I leave out the 1 it does nothing

make use of .parent()
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.active').removeClass('active');
// Add the 'active' class to this link:
$(this).addClass('active');
// Hide all the content:
$(this).parent('.content').hide();
// Show the requested content:
$('#' + content).show();
});

You need to use delegation if you are adding new .link dynamically.
By using .on() you can listen for a click on document (or another element that is ancestor to .link and is present when the click handler is attached) and when the click is fired it will look for .link.
Try this:
$(document).on('click', '.link', function(e) {

I recommend you to use the on method provided by jquery to handle click events, the classic click method not works with elements that you create after rendering the DOM.
$( "your-selector" ).on( "click", function() {
alert( "Hello world!");
});

All links with one class - how to add additional class on click?

It is possible if i have more links with the same class, on click add aditional class for active item? I have tried with jquery '.toggleClass()' but if i click on next link then both links has the same class
1
2
3
I have tried:
$('a').click(function() {
$('a').toggleClass('active');
});

You need to use this:
$('a').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('active').siblings('a.active').removeClass('active');
});
So, when an anchor is clicked, toggle the active class on that given anchor, and remove the active class from all siblings which are anchors and have the active class.
Here's a fiddle

I don't see any class in your html, but I add some for a example. Try this:
html
<div class="menu">
1
2
3
</div>
jQuery
$('.menu a').click(function(){ //check thru all <a> elements inside .menu
$('.menu ').removeClass("active"); // remove all active class
$(this).addClass("active"); //put active in parent of <a> which was clicked
});

Use the addClass() method
$('.link').addClass('active');

Check this:
Demo: http://jsfiddle.net/RKjh7/1/
$('a').click(function(){
$(this).addClass('yourClass');
});

Upon clicking on one of the links, remove the active class from current link, and add to the link just clicked.
$('a').click(function()
{
$('.active').removeClass('active');
$(this).addClass('active');
});

First remove the active class from all link and then add it on the clicked element.
Try this :
jQuery('.link').click(function(e){
e.preventDefault();
var elem = jQuery(this);
jQuery('.link').removeClass('active');
elem.addClass('active');
});
Here is the demo

Jquery Activate on DropDownList/SELECT item changed

I have some JQuery code that filters out a list of links on the page. At present the filtering is fired when a link wih a blind href is clicked. The id of the link is taken to determine which content remains visible on the page. EG:
<script type="text/javascript">
$(document).ready(function () {
//when a link in the filters div is clicked...
$('#filters a').click(function (e) {
//prevent the default behaviour of the link
e.preventDefault();
//get the id of the clicked link(which is equal to classes of our content
var filter = $(this).attr('id');
//show all the list items(this is needed to get the hidden ones shown)
$('#content ul li').show();
/*using the :not attribute and the filter class in it we are selecting
only the list items that don't have that class and hide them '*/
$('#content ul li:not(.' + filter + ')').hide();
});
});
I need to changed this so that, the JQuery is activated when an option is changed in a DropDownList/SELECT. However, I cant quite get my head around how to change this JScript to detect the selection in the DDL rather than a hyperlink.
Any help would be greatly appreciated.
Thanks.

Use the change() event
$("#idOfDropDown").change(function() {
//code here
var filter = this.value //gets the value of the selected dropdown item.
});
This will fire each time a dropdown selection has been made.

jQuery tab and tab content show up when clicked ?

My webpage is at http://www.sarahjanetrading.com/js/resume
All the HTML, CSS and jQuery code + images are available there for anyone to access.
My issue is that currently my jQuery code makes the tabs show the tab-content when I click on the achor tag of the tab. But the tab doesnt change into the clicked tab.(tab name remains the same).
And the tab changes into the clicked tab when i click on the respective li of the tab. What I want is that both the tab changes and the content of the tab shows when I click on the either the li of the tab or the anchor of the tab.

You have two lots of events registered. One on the anchors and the other on the lis. The one on the lis changes the active state for the tabs themselves while the one on the anchors change the content. You should combine these into one function.
You change check the li function is working by clicking on the very bottom edge of it. Because your anchor javascript has a return false feclaration it is preventing the click event bubbling up to the li, thus not showing the change.

Try changing the function:
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
to the following:
$("ul.tabs li a").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
$(".active-tab").removeClass();
$(this).parent().addClass("active-tab");
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
This should work and you should be able to remove your other javascript function.

If you already use jQuery you can use the jQueryUI library to create tabs. It is very simple and the style can easily be changed. Here is the Tutorial for tabs:
jQuery UI - Tabs Demo

If you click the whitespace around the text in the tabs, it works. Remove the anchor link from inside the tab, or add a click handler for the anchor link.
Edit:
My mistake. You have a click handler on your anchor element, but clicking the anchor link causes it to become $(this) in your code. So you assign class="active" to the anchor, when you want to assign it to the li.
$(this).addClass("active");
should be rewritten to modify the li. Personally, I would wrap the li in the anchor link:
<li></li>
This will probably require modifying your JS code a little, but will give a uniform result.