Show/hide divs on page load and by click

Question

I am using Twitter Bootstrap's button groups to toggle between different content. An example can be seen at http://jsfiddle.net/g8KSf/

Basically, if you click "Games", the games_container div will appear and the other divs will be hidden. I've got that working fine.

I store the post type in the database as post, game, video, etc and I want to be able to open the related div on page load instead of just on click. Right now the post_container is shown by default when the page is loaded.

Say I have a PHP variable $post_type = 'game';, how can I make the game_container show on page load while still having it toggle by clicking?

This is the js I have so far:

$('.container').hide();
$('#post_container').show();

$('.post_types button').click(function(){
        var target = "#" + $(this).data("target");
        $(".container").not(target).hide();
        $(target).show();
        $('#post_type').val($(this).text());
});​

Answer 1

To show game container on load, you need to replace this line

$('#post_container').show();

to

$('#game_container').show();

Refer LIVE DEMO

And also currently you are using

$('#post_type').val($(this).text());

Here rather than using this for this line $(this).text(), use target variable as below

$('#post_type').val($(target).text());

UPDATE:

To show dynamically on page load,

1. Store the value of post_type in variable

   var ptype = ...STORE THE POST TYPE VALUE...;

2. Pass the value to this line

   $('#'+ptype+'_container').show();
   OR
   $('#'+$post_type+'_container').show();

Refer LIVE DEMO 2

Answer 2

change $('#post_container').show(); to $('#game_container').show();

here you go http://jsfiddle.net/g8KSf/5/

I am not so familiar with php, for dynamic here:

function(){ $.ajax({ 
       type:"GET", 
       url:"file.php", 
       data:id, 
       success:function(container){ 
           $('#'+container).show();
       }, 
       // ... more ...
    }

Answer 3

Just run show() on page load using the selector you like.

$(function() {
    $('#<?=$post_type?>_container').show();
});

<?=?> short PHP for echo, you can not use that in you .js file. If the way I pointed out is not ok for you, you should set a global variable to the selector you like and use that instead of the inline PHP.

Answer 4

You could either:

• change the second line's #post_container to #game_container directly in your JavaScript code
• or call $('#btn-game').click(); afterwards, e.g. in the onload attribute of the body or in a separated script tag.