We Keep Coding

how to hide content div after page reloading

I am using this javascript for collapsing and expanding a div in which is some information. The div has class .info.
After page reloading, you can see first that the div is visible, but within a second, when the js is loaded, it disappears.
How can i achieve that when reloading the page, also at the very first second time the div is not visible?
$( document ).ready(function() {
var $accordionIO = $('.accordion .toggle-button');
$accordionIO.prev('div').hide();
$(".accordion .toggle-button").click(function () {
//Inner
var jqInner = $('.info', $(this).parent());
if (jqInner.is(":visible"))
{
jqInner.slideUp();
$(this).find('.button-switch').html('Information');
}
else
{
jqInner.slideDown();
$(this).find('.button-switch').html('Close');
}
});
});
The html:
<!-- Start toggle script -->
<div class="accordion">
<div class="info">
<?php
include('includes/information.txt');
?>
</div>
<div class="toggle-button"><span class="button-switch">Information</span> </div>
</div>

Please try adding inline style attribute. See example below:
<div style="display:none;"></div>

show pagination in a javascript tabs

I have this javascript code that allows me to show and hide tabs but my problem is when the user clicks on a link in the last tab it shows the first one. In another way the result of my clicks are hiden by the other tab.
Here is my javascript
$(document).ready(function() {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return
}
else{
$("#content div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
}
});
});

This $('#' + $(this).attr('name')).fadeIn(); is where I think your problem is. That is some very messed up code. Without seeing your markup, I'm not even sure what you were trying to do, but that isn't it. Anyway, you ended up trying to do that because your solution is messy to begin with. See my example below. I only do what is necessary...no need to add ids and attributes to everything to hide/show the appropriate things.
Here is a light and simple way to accomplish what you're looking for. Live demo (click here).
sample markup:
<ul class="tabs">
<li>
<a>Tab1</a>
</li>
<li>
<a>Tab2</a>
</li>
<li>
<a>Tab3</a>
</li>
</ul>
<div class="content">
<div>Tab1 Content</div>
<div>Tab2 Content</div>
<div>Tab3 Content</div>
</div>
javascript:
$(document).ready(function() {
$(".content div").not(':first').hide();
var $content = $('.content');
$('.tabs a').click(function() {
var index = $(this).parent().index();
var $selected = $('div:eq('+index+')', $content);
$('div', $content).not($selected).hide();
$selected.show();
});
});

Get the div id / class when windows.location is fired

I have a clickable div (windows.location) and I am trying to display a modal popup when this div is clicked.
here is my div box:
<div class="category_box" onclick="window.location='/Products/#cityName/#categoryName'">
<div class="category_box_catName">
#link
</div>
<div class="category_box_NumOfProds">
#Resources.Categories_GetByCity_NumProdsText
</div>
</div>
I was trying to get the class of this div when it clicked but could not make it work:
if ($(event.target).hasClass('div[class*=category_box]')) {
$('#mdlPopup').show();
}
Then I was trying to change the onclick and to add inside it $('#mdlPopup').show();
<div class="category_box" onclick="$('#mdlPopup').show(); window.location='/Products/#cityName/#categoryName'">
...
but this is also not working for me.

I removed the windows.location from the div and use this code to make the div clickable. then I can get the class from the div using:
$(document).ready(function () {
$('[class^=category_box]').click(function () {
$('#mdlPopup').show();
window.location = $(this).find("a").attr("href");
return false;
});
});

slide up jumps to top of page

I have some jQuery accordion sliders that slide down and slide up when clicked to reveal content.
Everything works as it should, but if you click on the same link to slide up the same content, it will jump to the top of the page.
I have
return false;
to prevent it jumping to the top of the page when another slider is clicked, so not too sure on what to use so that it doesn't jump to the top of the page to slide up the same content.
I've tied to add
event.preventDefault();
which works, but it breaks in IE9 and IE8.
Here's what I have:
$(document).ready(function() {
$('.slider').click(function() {
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
return false;
}
});
$('.internal').hide();
});
HTML Sample:
<div class="slider">Slide Link 1</div>
<div class="internal">
Stuff1
</div>
<div class="slider">Slide Link 2</div>
<div class="internal">
Stuff2
</div>

You are going to want to prevent the default action of the click event. try this:
$(document).ready(function() {
$('.slider').click(function(e) {
e.preventDefault();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
return false;
}
});
$('.internal').hide();
});

the links probably have anchor tags like <a href="#" ...>, try to remove href="#" and if you still want that looks like a link with pointer cursor, use css:
a{
cursor: pointer;
}

Best approach to slideup and tabs with jQuery

I'm creating a page with an image at the top, and a menu below. When the user clicks on on of the 3 menu buttons, the image slideUp and the page scrolls down so the menu is at the top of the page, then the right .content div fades in. The slideUp should only happen the first time the user clicks on of the buttons.
What the absolute best way to do this with jQuery? (no plugins)
I also need to know how I can't prevent it to fade in the page that is already visible if i click the same button twice?
I'm using rel instead of href, since the href made the page jump, even with return false.
This is what I have so far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
imgVisible = true;
$('#mainmenu a').click(function(){
var $activeTab = $(this).attr('rel');
if(!imgVisible){
$('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
$('.content').hide();
$($activeTab).fadeIn();
} else{
$('#imgholder').slideUp(500,function(){
imgVisible = false;
$('#mainmenu a[rel="'+$activeTab+'"]').click();
});
}
return false;
});
});
</script>
<div id="imgholder"><img src="image.jpg" /></div>
<div id="mainmenu">
<ul>
<li><a rel="#tab1"></a></li>
<li><a rel="#tab2"></a></li>
<li><a rel="#tab3"></a></li>
</ul>
</div>
<div id="container">
<div class="content" id="tab1">
content
</div>
<div class="content" id="tab2">
content
</div>
<div class="content" id="tab3">
content
</div>
</div>

The following code accomplishes what you need:
$('#mainmenu a').click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
$('#imgholder').slideUp(500,function(){
$('#'+myrel).fadeIn();
});
});
....
<li><a href='#' rel='tab0'></a></li>
I have removed the '#' sign from your rel='' piece ;-)
I am not sure why you would want to scroll the page. When a user clicks on the menu, he/she already has it focused (so it is visible inside the current viewport). But do you have a very large top image? If that is the case, let me know and I will modify the snippet. (Still, it depends on the amount of content below the menu visible when the page first loads.)
Also, for SEO reasons you might want to use the href instead of the rel attribute and create separate content holding pages. The following snippet would remove the navigation action.
$('#mainmenu a').each(function(){
var myhref = $(this).attr('href');
$(this).attr('href','#').attr('rel',myhref);
}).click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
//....etc

I think this is a great example of what your looking for: Organic Tabs

var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;
$mainmenu.find('a').click(function() {
$activeTab = $($(this).attr('rel'));
if (!imgVisible) {
// dont fire any events if already open
if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
$lastTab.fadeOut('normal', function() {
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
} else {
$('#imgholder').slideUp(500, function() {
imgVisible = false;
window.scrollTo(0, offset);
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
}
return false;
});
I highly suggest adding <a href="#"> as this will not make the page jump when done properly and will ensure validation on your anchor links. Someone let me know if I missed something, it can be resolved quickly (or you can do it for me if you have an optimization or improvement).