CODEWITHSUNDEEP
htmljqueryonclick
lowmatic
lowmatic

Reputation: 59

Jquery show / hide on click and default function

I'm very new to Jquery and I need your help! I'm trying to make a default option1 to be displayed automatically and I don't really know how to get it done. the three buttons in the HTML code should be used like a switch and each will show other other content inside a div. but, I can't find the correct way to show the first option as a default option to display even without clicking the buttons.

I want the content from the "full" div to be displayed as default content first and i need it to be shown / hidden using the buttons.

Please, help me solve this in the right way.

HTML:

<div class="btn-group">
  <button type="button" id="option1">full</button>
  <button type="button" id="option2">empty</button>
  <button type="button" id="option3">new</button>
</div>      

<div id="show-div">
    <div id="full">
        <p>This full should be default</p>
    </div>
    <div id="empty">
        <p>This is empty</p>                
    </div>
    <div id="new">
        <p>this is another option</p>               
    </div>
</div>

Jquery:

<script type="text/javascript">
$(document).ready(function() {
   $('button[type="button"]').click(function() {
       if($(this).attr('id') == 'option1') {
            $('#show-div').show(); 
            $('#full').show();
            $('#units').show();  
            $('#empty').hide();
            $('#new').hide();           
       }

        else if($(this).attr('id') == 'option2') {
            $('#show-div').show(); 
            $('#full').hide();
            $('#empty').show();
            $('#new').hide();   
       }
        else if($(this).attr('id') == 'option3') {
            $('#show-div').show(); 
            $('#full').hide();
            $('#empty').hide();
            $('#new').show();   
       }
       else {
            $('#show-div').show(); 
            $('#full').show();
            $('#default').show();
       }
   });
});
</script>

Upvotes: 0

Views: 2140

Answers (5)

SDK
SDK

Reputation: 1542

Try like below...

   $(document).ready(function() {
         $('#show-div').show(); 
         $('#full').show();
         $('#empty').hide();
         $('#new').hide();    

  $('button[type="button"]').click(function() {
   if($(this).attr('id') == 'option1') {
        $('#show-div').show(); 
        $('#full').show();
        $('#units').show();  
        $('#empty').hide();
        $('#new').hide();           
   }

    else if($(this).attr('id') == 'option2') {
        $('#show-div').show(); 
        $('#full').hide();
        $('#empty').show();
        $('#new').hide();   
   }
    else if($(this).attr('id') == 'option3') {
        $('#show-div').show(); 
        $('#full').hide();
        $('#empty').hide();
        $('#new').show();   
   }
   else {
        $('#show-div').show(); 
        $('#full').show();
        $('#default').show();
   }
 });
 });

Here is the fiddle... http://jsfiddle.net/w9p5ck6o/

Upvotes: 0

Anujith
Anujith

Reputation: 9370

You can shorten your code like this:

$(document).ready(function () {
    $("#empty, #new").hide();
    $('button[type="button"]').click(function () {
        $('#show-div').show();
        $('#' + this.innerHTML).show().siblings().hide();
        $('#units').show();
    });
});

DEMO

Upvotes: 3

Amit
Amit

Reputation: 15387

Try it as below

$(document).ready(function() {
   $('button[type="button"]').click(function() {
       if($(this).attr('id') == 'option1') {
       $('div').not(".btn-group").hide();
            $('#show-div').show(); 
            $('#full').show();
            $('#units').show();  

       }

        else if($(this).attr('id') == 'option2') {
           $('div').not(".btn-group").hide();
            $('#show-div').show(); 
            $('#empty').show();
       }
        else if($(this).attr('id') == 'option3') {
           $('div').not(".btn-group").hide();
            $('#show-div').show(); 
            $('#new').show();   
       }
       else {
            $('#show-div').show(); 
            $('#full').show();
            $('#default').show();
       }
   });
});

Demo

Update Demo

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can use css or jquery like below

CSS 

#empty #new{display:none;}

DEMO with CSS

OR using jQuery 

<script type="text/javascript">
$(document).ready(function() {
   //hide empty and new
   $('#empty').hide();
   $('#new').hide();   

   $('button[type="button"]').click(function() {
       if($(this).attr('id') == 'option1') {
            $('#show-div').show(); 
            $('#full').show();
            $('#units').show();  
            $('#empty').hide();
            $('#new').hide();           
       }

        else if($(this).attr('id') == 'option2') {
            $('#show-div').show(); 
            $('#full').hide();
            $('#empty').show();
            $('#new').hide();   
       }
        else if($(this).attr('id') == 'option3') {
            $('#show-div').show(); 
            $('#full').hide();
            $('#empty').hide();
            $('#new').show();   
       }
       else {
            $('#show-div').show(); 
            $('#full').show();
            $('#default').show();
       }
   });
});
</script>

DEMO with jQuery

Upvotes: 0

Joakim M
Joakim M

Reputation: 1803

Add display none to the divs you want to hide

<div class="btn-group">
  <button type="button" id="option1">full</button>
  <button type="button" id="option2">empty</button>
  <button type="button" id="option3">new</button>
</div>      

<div id="show-div">
    <div id="full">
        <p>This full should be default</p>
    </div>
    <div id="empty" style="display:none">
        <p>This is empty</p>                
    </div>
    <div id="new"  style="display:none">
        <p>this is another option</p>               
    </div>
</div>

Check this fiddle:

JSFIDDLE

Upvotes: 0

Related Questions