Question

I have two buttons where one button i.e Staffing and another button i.e NonStaffing. When I click on the Staffing button then I’m able to get my desired result, meaning I’m able to see page1 and hide page2. But when I click on the NonStaffing button then I’m not getting my desired result, meaning hiding page1 and showing page2. It hides the whole page. I’m not able to figure out the problem.

HTML:

<ul>
     <li class="menu-item" style="list-style-type: none;margin-left: 50px; margin-top: -120px; position: absolute;">
        <input   type="submit" name="projectType" value="Staffing" >
     </li>
    <li style="list-style-type: none;margin-left: 150px; margin-top: -120px; position: absolute;" >
        <input type="submit" name="projectType1" value="NonStaffing">
    </li>
</ul>


<div id="abc1" style="background: #CCC; height:250px;width:250px;margin-top:150px;border: 4px solid #AAA;">
   <button>Open Dialog</button>
        Page1  

</div>


<div id ="mno" style="background: #CCC; height:110px;width:150px;margin-left:410px;margin-top: -250px; border: 4px solid #AAA;"> Page2

</div>

Javascript:

var dialogOffset = {
    top: 50,
    left: 10
}
  $("input:submit[name=projectType1]").click(function() {
    var value = $(this).val();
    if(value=='NonStaffing'){

        $('#mno').show();
         $('#abc1').hide();


    }else{


    }
});



     $("input:submit[name=projectType]").click(function() {
                var value = $(this).val();
                    if(value=='Staffing'){
                        $('#abc1').show();
                        $('#mno').hide();
                    }else{}
                }); 



$('button').click(function() {
    var $parent = $(this).closest('div.col');
    var parentPos = $parent.offset()
    var parentIndex = $('.col').index($parent);   
    var numDialogs= $('.colDialog_'+parentIndex).length;
    var dialogTop=parentPos.top + dialogOffset.top + numDialogs*30;
    var dialogPosition = [parentPos.left + dialogOffset.left, dialogTop];
    $('<div class="colDialog_'+parentIndex+'">').dialog({      
        position:  dialogPosition,
        width: 170,
        title: 'Col:'+(parentIndex+1 +', Dia: '+(numDialogs+1)) ,
        close: function() {
            $(this).remove()
        }
    })
});​

And you can find a JSFiddle of the code above here.

Answer 1

<input type="submit" class="chgpage" rel="abc1" value="Staffing" >
<input type="submit" class="chgpage" rel="mno" value="NonStaffing">
<div id="abc1" class="page" style="display:none;width:500px;height:500px;border:1px solid black;">Page1</div>
<div id ="mno" class="page" style="display:none;width:500px;height:500px;border:1px solid red;">Page2</div>


<script type="text/javascript">
     $("input.chgpage").click(function() {
         $('div.page').hide();
         $('#'+$(this).attr('rel')).show();
    });
</script>

Have Fun 😉