We Keep Coding

Show/hide an element after page load in a dynamic page

I have a server side web application that shows a listing with some filters. I would like to add a "Reset" button when a filter item is clicked and then I want the Reset button to disappear when the Reset button is clicked. I thought I can accomplish it with this:
$('.sort-by-agency ul li a').click(function() {
$('.sort-by-agency ul').after(viewAllBtn);
});
$('.sort-by-agency .view-all').click(function(){
$(this).hide();
});
But this doesn't work and it makes the Reset button to only appear for a second once a filter is clicked. The filter click makes the page to reload, and that makes the Rest button to disappear quickly. Is there a way to trigger the on click when ".sort-by-agency ul li a" link is clicked but load the function after the page is reloaded?

When the page reloads, the state of the app will be lost. So you have to prevent the page from reloading when the filter is clicked.
for accomplishing that, you should change your first function to this:
$('.sort-by-agency ul li a').click(function(event) {
event.preventDefault();
$('.sort-by-agency ul').after(viewAllBtn);
});
Learn more about this from jQuery docs : event.preventDefault()

Active link not being removed from

I am using a 3 tab menu when active tag being on form 1 when page loads. When each tab is clicked the active tag should be removed and applied to the new selected form. form1 form2 form3
This works fine when I do not add the forms to each tab. But when I do add the forms the problem persist.
I am making the forms with contact 7 the wordpress plugin. Would my javascript be conflicting with something existing?
This is my javascript? Is there a way I could change it to make it work better with contact 7 plugin?
<script>
$('#myForm a').click(function (e) {
var tab = $(this);
if(tab.parent('li').hasClass('active')){
window.setTimeout(function(){
$(".tab-pane").removeClass('active');
tab.parent('li').removeClass('active');
},1);
}
});
</script>
You can see the site im working on Click Here
The forms on the home page in the tabs.

You can simplify your logic by removing the active class on all of it's sibling li elements and then add the active class to the one that was clicked.
$('#myForm a').click(function (e) {
var tab = $(this);
tab.parent('li').siblings('li').removeClass('active');
tab.parent('li').addClass('active');
});

How to select a <div> on a particular tab clicked?

I am designing a tabs of my own for tab navigation I used google api and jquery.
Here my fiddle,
http://jsfiddle.net/raghavendram040/fk7y2d5L/2/
but in fiddle i didnt add google api link.
Here is my js code
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
$("header ul li a").click(function(e) {
e.preventDefault();
$("header ul li a").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
var tabtitle=$(this).attr("title");
$.show('#tab'+tabtitle);
});
});
Here I am trying is on click of each tag i am trying to display respective div tag. But I cant able to do it. can any one help me in this.

Try this : You don't need google api for this. Just include jquery library in your html page as shown below. Put your code inside $(function(){..}); which will ensure that script applies after loading whole DOM structure.
For more information on jQuery visit - JQuery.com
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(function()
{
// Just for demonstration purposes, change the contents/active state using jQuery
$("header ul li a").click(function(e) {
e.preventDefault();
// remove active class from all tabs
$("header ul li a").removeClass("active");
// hide all tab div
$('div[id^="tab"]').hide();
//add active class to clicked tab
$(this).addClass("active");
// show clicked tab content div
var tabtitle=$(this).attr("title");
$('#tab'+tabtitle).show();
});
});
Demo

JSFiddle: http://jsfiddle.net/TrueBlueAussie/fk7y2d5L/11/
$(function () {
// Just for demonstration purposes, change the contents/active state using jQuery
$("header ul li a").click(function (e) {
e.preventDefault();
// Remove the active class from any anchors that have it
$("header ul li a.active").removeClass("active");
// Add active to the selected anchor
$(this).addClass("active");
var tabtitle = $(this).attr("title");
// Hide all divs that start with id=tab
$('#main div[id^=tab]').hide();
// Show the selected div
$('#tab' + tabtitle).show();
});
// initial hide of all tabs
$('#main div[id^=tab]').hide();
// Trigger initial selection
$('header a.active').trigger('click');
});

First of all you need to hide the tabs, lets say that you do so by adding a class tab for all corresponding <div>'s along with the following css
.tab {
display:none;
}
Then set the initially active tab as visible by applying the class visible given below to it.
div.tab.visible {
display:block;
}
Now you can use the following JS to make it work:
$("header ul li a").click(function (e) {
e.preventDefault();
$(".active").removeClass("active"); // you don't need to iterate over using each
$(this).addClass("active");
var tabtitle = $(this).attr("title");
$("#main div.tab.visible").removeClass("visible"); // hide actve tab
$('#tab' + tabtitle).addClass("visible"); // show selected tab
});
Updated Fiddle
Side note: I added the missing tab blog and added the corresponding text for the demo

Firstly. No need for anything other than just jQuery.
Secondly: Personally, I would default all the tabs to being hidden, and only showing them when the "active" class is on them.
Also, you might want to add some actual class names to the tabs and the tab-content so you have better control. ".tab" for the tabs, and ".tab-content" for the content.
The javascript code is then fairly simple and understandable:
$(function()
{
$(".tab").click(function(e) {
e.preventDefault();
$(".tab.active, .tab-content.active").removeClass("active");
$(this).addClass("active");
var tabtitle = $(this).attr("title");
$('#tab'+tabtitle).addClass("active");
});
});
JSFiddle with new class names

Stop jquery tabs from moving to the top of the page

I have set up tabs on a site using jquery, so that 4 pages of data can be shown without refreshing the page.
This works fine but there is one quirk which I want rid of! If ive scrolled down the first page a bit, and then click on another tab, the 2nd tab appears but is no longer scrolled down (ie it appears and the page moves back up to the top). This makes the page 'look' as though its reloading even though its not. Is there a way to prevent the page moving, ie locking the scrollbar in its current position?
This is the script for creating the tabs and loading the different sections into view:
<script>
//add the tabs
$(document).ready(function() {
$('.tabs a').click(function() {
var $this = $(this);
$('.panel').hide();
$('.tabs a.active').removeClass('active');
$this.addClass('active').blur();
var panel = $this.attr('href');
$(panel).fadeIn(250);
return false;
}); //end click
$('.tabs li:first a').click();
}); //end ready
</script>

Try to use e.preventDefault():
$('.tabs a').click(function(e) {
e.preventDefault();

Use event.preventDefault(); You can restrict the default behavior using this function and code accordingly to your requirement.
$( ".tabs a" ).click(function( event ) {
event.preventDefault();
});

2 separate div containers - links utilizing the same active state in 1 div container as it does in 2nd div container

I am trying to make a link in a separate div container open a panel in a completely different div container (which if you click on the second div containers link, the panel also opens and the link itself has an active state) - I got the part down where if I click on a link in the first div container, the panel opens up from the second div container, but am struggling with making that first div containers link activate the active state in the second div container.
If you take a look at the demo, simply click on the {Ñا} Members tab, as the other 2 are inactive atm...Once you click on that tab, a panel opens (not the one I am talking about though), now that; that panel is open, look at the very bottom, on the left side in the div container that holds the info title: "Official Roster", there is a link in there that says "rank", if you click on that specific link, the O.F. panel opens up like it should, however, the active state selects them all rather than just the 1 that is selected...I'm getting close, but am seriously stuck and can't seem to figure it out...
Demo: http://jsfiddle.net/Djdzw/2/
I believe it is pure javascript that would be needed, however, it could also be the css as well. I'll provide what code I have atm below, however - I'll only provide the javascript since posting all the code that is required would simply be too much. If you could simply take a look at the demo above, it might be easier on the eyes.
/* ===== The section below is what needs to be edited ===== */
$('.info_box p a').click(function () {
var a = $('#profile_list a');
$('#profile_list a').removeClass('active');
$('#profile_list a').addClass('active');
});

Im not sure if understand correct but for active button when click on #profile_list
u just need to write
$('#profile_list a').click(function () {
var a = $(this);
$('#profile_list a').removeClass('active');
$(this).addClass('active');
});
And here for second part
$('.info_box p a').click(function () {
var a = $(this).attr("href")
$('#profile_list a').removeClass('active');
$('#profile_list a[href="' + a + '"]' ).addClass('active');
});