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