简体   繁体   中英

Bootstrap - linking between accordions on the same page

I'm trying to link from within one accordion to another on the same page.

Currently, the code I have is this:

<!DOCTYPE html>
<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">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="SHORTCUT ICON" type="image/x-icon" href="/favicon.ico">

    <title>TITLE</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/modern-business.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
    <!-- Page Content -->
    <div class="container">

        <!-- Page Heading/Breadcrumbs -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">HEADING

                </h1>
            </div>
        </div>
        <!-- /.row -->

        <!-- Content Row -->

    <div class="row">
        <div class="col-lg-12">
            <div class="panel-group" id="accordion">

                <!-- .panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">QUESTION ONE?</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>Answer to question one</p>
                        </div>
                    </div>
                </div>
                <!-- /.panel -->
                <!-- panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">QUESTION TWO?</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">

                            <p>Answer for question two, which has <a href="about.html#collapseOne" target="_main">THIS LINK</a> as a link to an accordion on another html page.</p>
                        </div>
                    </div>
                </div>
                <!-- /.panel -->
                <!-- panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">QUESTION THREE?</a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>The answer to question three.
                            </p>

                        </div>
                    </div>
                </div>
                <!-- /.panel -->
                <!-- panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">QUESTION FOUR?</a>
                        </h4>
                    </div>
                    <div id="collapseFour" class="panel-collapse collapse">
                        <div class="panel-body">

                            <p>More info on this is available <a href="#collapseThree">here.</a>
                        </div>
                    </div>
                </div>
                <!-- /.panel -->
                </div>
                <!-- /.panel-group -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->



    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    <!-- Below function lets you link to and opens accordian panel -->
    <script>

        $(document).ready(function () {
          location.hash && $(location.hash + '.collapse').collapse('show');
    });
    </script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

OK, my problem is that I have a page with an accordion containing four collapsed sections.

collapseTwo contains a link to an accordion on a different page. This link works...it loads the About page and opens #collapseOne on the About page.

collapseFour contains a link to #collapseThree (which is on the same page), and this link doesn't work. It doesn't do anything at all. What I want it to do is open #collapseThree.

You didn't use data attributes in the link:

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">here.</a>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <!-- Page Heading/Breadcrumbs --> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">HEADING </h1> </div> </div> <!-- /.row --> <!-- Content Row --> <div class="row"> <div class="col-lg-12"> <div class="panel-group" id="accordion"> <!-- .panel --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">QUESTION ONE?</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> <p>Answer to question one</p> </div> </div> </div> <!-- /.panel --> <!-- panel --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">QUESTION TWO?</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <p>Answer for question two, which has <a href="about.html#collapseOne" target="_main">THIS LINK</a> as a link to an accordion on another html page.</p> </div> </div> </div> <!-- /.panel --> <!-- panel --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">QUESTION THREE?</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <p>The answer to question three.</p> </div> </div> </div> <!-- /.panel --> <!-- panel --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">QUESTION FOUR?</a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <p>More info on this is available <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">here.</a> </div> </div> </div> <!-- /.panel --> </div> <!-- /.panel-group --> </div> <!-- /.col-lg-12 --> </div> <!-- /.row --> </div> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM