Accordion inside popup, colorbox / modal Bootstrap

问题

I want to achieve an accordion inside popup. Is it possible? I tried to do it with colorbox, but seems it's not feasible, so I try to use bootstrap modal, but seems I got confused.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 3.1.0 - Modal Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
         $(document).ready(function() {
         $("#accordion").accordion({ autoHeight: true });
    });
    </script>
  </head>
  <body>
    <div class="container">
        <h2 style="text-align: center;">Bootstrap 3.1.0 - Modal Demo</h2>
        <div class="row text-center">
            <h3>The Basic Modal</h3>
            <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Click to open Modal</a>
        </div>
        <hr>
    </div>

    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div id="accordion">
          Text / content outside accordion
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Inside section 1
        </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Inside section 2
        </p>
    </div>
</div>
        </div>
      </div>
    </div>  

  </body>
</html>

My full code : http://jsfiddle.net/g6HA4/2/

Thanks for any help.

回答1:

Your JQuery code is not complete, change:

$("#accordion").accordion({
 autoHeight: true
});

To:

$(function() { $("#accordion").accordion({
 autoHeight: true
  });
});

See Demo

回答2:

By using JQuery You can have accordian inside dialogbox.This code may help you

<button id='clicker'>Click For Dialog</button>
<div id='dialog'>
    <div id='accordion'>
        <h3>Section 1</h3>
        <div>
            <p>This is first section of accordian </p>

        </div>
        <h3>Section 2</h3>
        <div>
            This is second section of Accordian
        </div>
    </div>
</div>

and js as

$(function() {
    $("#accordion").accordion().hide();
    $('#clicker').button().click(function(){
        var overlayDialogObj = {
          autoOpen: true,
          height: 400,
          width: 310,
          modal: false,
          open: function(){
              $('#accordion').accordion(
                  {heightStyle: "fill", collapsible: true}).show();
          },
          buttons: {
             'Done': function() {
                $(this).dialog('close');
             }
          }
       };
        $('#dialog').dialog(overlayDialogObj).show();

    });
});

SEE DEMO HERE

来源：https://stackoverflow.com/questions/25138173/accordion-inside-popup-colorbox-modal-bootstrap

标签

jquery

twitter-bootstrap

user-interface

accordion