Browsing different content in a jQuery dialog with

Question

I am creating a jQuery UI Dialog box, with 3 buttons in it, such that I can display different content in the dialog box according to the different buttons I have clicked.

And before that, I have set three buttons to trigger the Dialog box.

ie. - initially I have 3 buttons - click on anyone of them will lead to a dialog box popup - when click on button 1, the button 1 in the dialog box will be bold and the content 1 will be shown. and I can freely switch between contents by clicking the buttons in the dialog box - the respective button will be bold and respective content will be shown according to the initial button that I click on

And I have created a demo for it (without CSS styling as those are too complicated to include, sorry)>>>>>> JSFiddle

    $(document).ready(function(){
    $('#helpDialogPop').dialog({
        autoOpen:false,
        modal: true
    }).dialog("widget")
        .next(".ui-widget-overlay")
        .css("background", "black")
        .css("opacity","0.9");
    $('#pop1').click(function(){ $('#helpDialogPop').dialog('open'); });
    $('#pop2').click(function(){ $('#helpDialogPop').dialog('open'); });
    $('#pop3').click(function(){ $('#helpDialogPop').dialog('open'); });
});

Actually I have asked similar questions before and someone suggested me to use tab, but eventually using tabs cannot get the effect that I want. So I am using the current approach to do it.

And I can successfully display the content for button 1, but I don't know how to define the content into three separate buttons such that they won't appear together in the first content page.

One more thing is that I am not quite sure about whether I should use a div or some separate html pages to contain the content to display.

Would anyone please give me some hints and direction please, thanks.

Answer 1

Create 3 different div for the 3 different buttons no seperate html is required

$(document).ready(function() {
  $('li:first-child, #i1').click(function() {
    $('#main button').css({
      'display': 'inline-block'
    });
    $('#i1').addClass("active");
    $('#i3,#i2').removeClass("active");
    $('#info1').css({
      'display': 'block'
    });
    $('#info2,#info3').css({
      'display': 'none'
    });
  })

  $('li:nth-child(2), #i2').click(function() {
    $('#main button').show();
    $('#i2').addClass("active");
    $('#i1,#i3').removeClass("active");
    $('#info2').css({
      'display': 'block'
    });
    $('#info1,#info3').css({
      'display': 'none'
    });
  })
  $('li:nth-child(3), #i3').click(function() {
    $('#main button').show();
    $('#i3').addClass("active");
    $('#i1,#i2').removeClass("active");
    $('#info3').css({
      'display': 'block'
    });
    $('#info2,#info1').css({
      'display': 'none'
    });
  });

});

#info1,
#info2,
#info3 {
  display: none;
  position: absolute;
  top: 70px;
  background: #454545;
  width: 300px;
  height: 500px;
  color: white;
}
.active {
  background: green;
}
ul li {
  display: inline-block;
  list-style-type: none;
  background: lightblue;
  border: 1px solid black;
}
button {
  display: none;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <ul>
    <li>1nfo</li>
    <li>info2</li>
    <li>info3</li>
  </ul>

  <button id="i1">info1</button>
  <button id="i2">info2</button>
  <button id="i3">info3</button>
  <div id="info1">description of info1</div>
  <div id="info2">description of info2</div>
  <div id="info3">description of info3</div>
</div>