I have created dynamic list using bootstrap and thymeleaf, list also contains collapse functionality which is not working properly, aria-expanded = "false" is not working, I browsed a lot but not any solution for dynamically created list using thymeleaf.
When the page loads all collapsible panel should be closed for that I used aria-expanded="false", but it is not working.
As the list comes into from it takes few clicks to achieve collapse.
Below there is the code and image.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/resources/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/resources/css/style.css" rel="stylesheet">
<link href="/resources/css/jquery.qtip.min.css" rel="stylesheet"/>
<link href="/resources/css/icheck.css" rel="stylesheet" />
<link href="/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="/resources/css/sweet-alert.css" rel="stylesheet" />
<link href="/resources/css/custom-accordin.css" rel="stylesheet" />
</head>
<body>
<div class="container" th:fragment="content">
<header>
<!--Main Navigation-->
<nav class="navbar fixed-top scrolling-navbar navbar-expand-lg navbar-dark blue-grey darken-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="EmployerDashboard.html"><i class="fa fa-chevron-left fa-2x"></i></a> </li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="navbar-brand" href="#">Submission status</a> </li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item"><i class="fa fa-bars fa-2x"></i></li>
</ul>
</nav>
</header>
<!--Main Navigation-->
<div class="container-fluid">
<!--Grid row-->
<div class="row">
<div class="col-12">
<div class="mx-auto">
<div class="alert blue-grey lighten-4" role="alert" style="border-top: 2px solid #000;">
<div class="row">
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.payPeriod}"></strong><br/>
<small>Submission Period</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${#codeMapUtil.getCodeValue(efiledHdrBean.payFreq, 'PAY_FREQ_DESC').concat('ly')}"></strong><br/>
<small>Pay Frequency</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.ppType}"></strong><br/>
<small>Pension Prov.</small></p>
</div>
</div>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<p class="text-center"><i class="fa fa-check fa-2x text-success"></i> Your Contribution data is accepted by NEST<br />
Amount Due to Pension provider: <strong>£ 40.72</strong></p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<ul class="list-group" >
<div class="accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- <li class="list-group-item" th:each="listBean,iterator: ${contributionStatus}"> -->
<li class="list-group-item">
<div class="card" th:each="listBean,iterator: ${contributionStatus}" >
<div class="card-header" role="tab" th:id="'heading' + ${iterator.index}"> <a class="collapsed black-text" data-toggle="collapse" th:href="'#collapse' + ${iterator.index}" aria-expanded="false" th:attr = "aria-controls='collapse' + ${iterator.index}"> <i class="fa fa-angle-down rotate-icon float-right"></i>
<div class="row">
<div class="col-7"> <span class="icon-round pull-left">
<p class="icon"><span th:text=" ${#strings.substring(listBean.eeSurname,0,1) + #strings.substring(listBean.eeFname,0,1)}"></span></p>
</span>
<p class="h5 list-group-item-heading"><strong><span th:text="${listBean.eeSurname}"></span> , <span th:text="${listBean.eeFname}"></span></strong></p>
<p class="list-group-item-text mb-2"><span th:text="${listBean.eeWksNo}"></span> <span class="badge grey lighten-2 black-text" th:text="${listBean.assessStatus}"></span></p>
</div>
<div class="col-4 pr-0">
<p class="h5 list-group-item-heading text-right"><span class="float-left">£</span><span th:text="${listBean.eePenEarnings}"></span></p>
</div>
</div>
</a> </div>
<div th:id="'collapse' + ${iterator.index}" class="collapse show" role="tabpanel" data-parent="#accordionEx" th:attr="aria-labelledby='heading' + ${iterator.index}">
<div class="card-body black-text">
<p class="h6">Pensionable Earnings: £ <span th:text="${listBean.eePenEarnings}"></span></p>
<ul class="list-group" >
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employer</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.erContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.erDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employee</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.eeContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0">Additional Voluntary Contribution (AVC)</p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeAvcDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item grey lighten-4">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0"><strong>Total Contribution</strong></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><strong><span class="float-left">£</span><span th:text="${listBean.erContribution}"></span></strong></p>
</div>
</div>
</li>
</ul>
<ul class="list-group mt-4" aria-hidden="true">
<li class="list-group-item grey lighten-3">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-text mb-0"><strong>Partial / Non-Payment of Contribution</strong></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Reason</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribReason}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Effective Date</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribEffectiveDate}"></span></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>
<!--/.Card-->
</div>
</div>
</div>
<!--Main container-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" th:src="#{/resources/js/jquery.3.2.1.min.js}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" th:src="#{/resources/js/popper.min.js}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/bootstrap.min.js}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/mdb.min.js}"></script><!--
<script type="text/javascript" th:src="#{/resources/js/thymol.js}"></script>
<script type="text/javascript" th:src="#{/resources/js/thymolconfig.js}"></script> -->
<script type="text/javascript" th:src="#{/resources/js/custom.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/moment.2.10.6.min.js}"></script>
<!-- SCRIPTS -->
<!-- <!-- thymol JavaScript -->
<script th:src="#{/resources/js/main.js}"></script>
<script th:src="#{/resources/js/sweet-alert.min.js}"></script>
<script th:src="#{/resources/js/utils.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/date.js}"></script>
<script th:src="#{/resources/js/icheck.min.js}"></script>
<script th:src="#{/resources/js/dynamicFormFields.js}"></script>
<script th:src="#{/resources/js/moment.js}"></script>
<script th:src="#{/resources/js/bootstrap-datetimepicker.min.js}"></script>
<script th:src="#{/resources/js/jquery.qtip.min.js}"></script>
<script th:src="#{/resources/js/bc-quicklink.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
// SideNav Initialization
$(document).ready(function () {
$(".button-collapse").sideNav({
edge: 'right',
closeOnClick: true
});
var container = document.getElementById('slide-out');
Ps.initialize(container);
});
</script>
<script>
// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});
/*]]>*/
</script>
</div>
</body>
</html>
Help me to solve the problem.
<title>TheSaaS - Responsive Bootstrap SaaS, Software & WebApp Template</title>
<script>if (top !== self) top.location.replace(self.location.href +'?utm_source=themeforest&utm_medium=preview&utm_campaign=thesaas');</script>
<!-- Styles -->
<link type="text/css" href="{{url_for('static',filename='assets/css/core.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/thesaas.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/style.css')}}" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="{{url_for('static',filename='assets/img/apple-touch-icon.png')}}">
<link rel="icon" href="{{url_for('static',filename='assets/img/favicon.png')}}">
<!-- Open Graph Tags -->
<meta property="og:title" content="TheSaaS">
<meta property="og:description" content="A responsive, professional, and multipurpose SaaS, Software, Startup and WebApp landing template powered by Bootstrap 4.">
<meta property="og:image" content="http://thetheme.io/thesaas/assets/img/og-img.jpg">
<meta property="og:url" content="http://thetheme.io/thesaas/">
<meta name="twitter:card" content="summary_large_image">
<!-- Topbar -->
<nav class="topbar topbar-inverse topbar-expand-md topbar-sticky">
<div class="container">
<div class="topbar-left">
<button class="topbar-toggler">☰</button>
<a class="topbar-brand" href="index.html">
<img class="logo-default" src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo">
<img class="logo-inverse" src="{{url_for('static',filename='assets/img/logo-light.png')}}" alt="logo">
</a>
</div>
</div>
</nav>
<!-- END Topbar -->
<!-- Header -->
<header class="header fadeout header-inverse pb-0 h-fullscreen" style="background-image: linear-gradient(to bottom, #243949 0%, #517fa4 100%);">
<canvas class="constellation"></canvas>
<div class="container">
<div class="row h-full">
<div class="col-12 text-center align-self-center">
<h1 class="fs-50 fw-600 lh-15 hidden-sm-down">Built for <span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
<h1 class="fs-35 fw-600 lh-15 hidden-md-up">Built for<br><span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
<br>
<p class="fs-20 hidden-sm-down"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
<p class="fs-16 hidden-md-up"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
<br>
<hr class="w-60 hidden-sm-down">
<br>
<a class="btn btn-xl btn-round btn-primary fs-20 fw-500 w-350 shadow-3 hidden-sm-down" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Purchase Now - $19</a>
<a class="btn btn-lg btn-round btn-primary w-250 shadow-3 hidden-md-up" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Purchase Now - $19</a>
<br>
<p class="mt-2 mt-md-4"><small>or purchase an Extended License</small></p>
</div>
<div class="col-12 align-self-end text-center pb-70">
<a class="scroll-down-2 scroll-down-inverse" href="#" data-scrollto="section-demo"><span></span></a>
</div>
</div>
</div>
</header>
<!-- END Header -->
<!-- Main container -->
<main class="main-content">
<!--
|‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
| Sample Landing Pages
|‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
!-->
<section class="section overflow-hidden" id="section-demo">
<div class="container">
<header class="section-header">
<small>Demo</small>
<h2>Sample Landing Pages</h2>
<hr>
<p class="lead">Apart from internal pages, we have designed several single sample pages to get start with.</p>
</header>
<div class="row gap-y text-center">
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-helpato-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Helpato</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-trello-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Trello</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-gmail-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Gmail</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-skype-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Skype</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-github-sm.jpg')}}" alt="demo github landing"></p>
<p><strong>GitHub</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-app-sm.jpg')}}" alt="demo app landing"></p>
<p><strong>Mobile App</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-bootstrap-sm.jpg')}}" alt="demo bootstrap landing"></p>
<p><strong>Bootstrap</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-slack-sm.jpg')}}" alt="demo slack landing"></p>
<p><strong>Slack</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-zendesk-sm.jpg')}}" alt="demo zendesk landing"></p>
<p><strong>Zendesk</strong></p>
</div>
</div>
</div>
</section>
</main>
<!-- END Main container -->
<!-- Footer -->
<footer class="site-footer">
<div class="container">
<div class="row gap-y align-items-center">
<div class="col-12 col-lg-3">
<p class="text-center text-lg-left">
<img src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo">
</p>
</div>
<div class="col-12 col-lg-6">
<ul class="nav nav-inline nav-primary nav-hero">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page-feature.html">Features</a>
</li>
<li class="nav-item hidden-sm-down">
<a class="nav-link" href="page-pricing.html">Pricing</a>
</li>
<li class="nav-item hidden-sm-down">
<a class="nav-link" href="page-contact.html">Contact</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3">
<div class="social text-center text-lg-right">
<a class="social-facebook" href="https://www.facebook.com/thethemeio"><i class="fa fa-facebook"></i></a>
<a class="social-twitter" href="https://twitter.com/thethemeio"><i class="fa fa-twitter"></i></a>
<a class="social-instagram" href="https://www.instagram.com/thethemeio/"><i class="fa fa-instagram"></i></a>
<a class="social-dribbble" href="https://dribbble.com/thethemeio"><i class="fa fa-dribbble"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- END Footer -->
<!-- Scripts -->
<script src="{{url_for('static',filename='assets/js/core.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/thesaas.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/script.js')}}"></script>
Hello,
This is a template which I have modified .. outside flask when I am running this, this works fine ( without url_for ). But when I am trying to use within flask, the javascript files are not working .. please help me
Make sure your directory structure is modified for the root of you flask application, otherwise you're requesting js files that aren't there
You don't have to use url_for. Instead try:
<link type="text/css" src="{static/assets/css/core.min.css}" rel="stylesheet">
Hi I am facing a problem that: MY HTML,js,Bootstrap based View of my web project shows perfectly/fine on my Google Chrome browser i have not hard coded any screen size. But when I open this same project on other machines Google Chrome browser the UI/View is totally distorted and also my jS/jQuery functions stop functioning . How can I control this behavior.
I have my code below, my I guess it is more browser compatibility than code issue. Please advise.
<!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.0, maximum-scale=1.0, user-scalable=no" />
<title>Wallboard A</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>High ARPU - H+HVC</h1>
</div>
</div>
</div>
</header>
<section class="the-table">
<div class="container-fluid">
<div class="row no-gutter row-eq-height">
<div class="col-md-2 col-sm-6">
<em><span>Logged In Agents</span></em>
<span><span>6232</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>On Calls</span></em>
<span><span>456</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Ready</span></em>
<span><span>1553</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Not Ready</span></em>
<span><span>0</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Wrapup</span></em>
<span><span>45</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Reserved Agents</span></em>
<span><span>478</span></span>
</div>
</div><!--/row-->
<div class="row no-gutter">
<div class="col-md-2 col-sm-6">
<em><span>Calls Offered</span></em>
<span><span>4566</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Answered</span></em>
<span><span>1388</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Abandoned</span></em>
<span><span>3874</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls In Queue</span></em>
<span><span>0</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Longest Talk Duration</span></em>
<span><span>00:45:55</span></span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-md-2 col-sm-6">
<em><span>Abandoned %</span></em>
<span><span>50%</span></span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<section class="the-table wide">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12">
<em class="large">Service Level %</em>
<span class="large">79.0%</span>
<div class="clearfix visible-xs"></div>
<em>AHT (Sec)</em>
<span>136</span>
<em>ASA (Sec)</em>
<span>32</span>
<em>Max Time In Queue</em>
<span>00:00:00</span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
When I click a link, ng-view renders a new html page, but its defaulting to the searchbox and zooming in on the page in mobile view.
If you are unsure what I mean, go to http://www.andrewhnovak.com with your phone and you will see what I mean.
How can I have it not default to the search box?
Beef-Recipes.html
<!DOCTYPE html>
<html ng-app="RecipeSite">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="app.css">
<script src="app.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="row"> </div>
<div class="row top-buffer"> </div>
<div ng-controller="RecipeController">
<div class="row">
<div class="col-md-offset-5 col-sm-offset-4">
<form class="form-inline">
<input ng-model="query" type="text" class="form-control"
placeholder="Search Beef Recipes" autofocus>
</form>
</div>
</div>
<div class="row">
<div ng-repeat="recipe in BeefRecipes | limitTo: -12 | filter:query | orderBy: 'name' ">
<div class="col-md-3">
<br><br>
<button class="btn btn-warning btn-lg" ng-click="open(recipe)"><img ng-src="{{recipe.image}}" alt="recipeImage" class="recipeImage"/><br>{{ recipe.name }}</button> <br />
</div>
</div>
</div>
</div><!--end recipeController-->
</div><!--end container-->
<!--MODAL WINDOW-->
<div class="container">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h2>Recipe </h2><h3>{{ recipe.name }}</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
<img ng-src="{{recipe.image}}" class="recipeImageModal"/>
</div>
<br>
<br>
<div class="col-md-offset-3 col-md-5 col-sm-offset-1 col-sm-5">
<ul>
<li> {{"Cook Time: " + recipe.cookTime }}</li>
<li> {{"Yield: " + recipe.yield}}</li>
</ul>
</div>
</div>
<div class="row top-buffer"> </div>
<div class="row">
<div class="col-md-offset-2 col-md-6 col-sm-offset-2"><div id="ingredientLabel">Ingredients</div>
</div>
</div>
<div class="ingredients">
<br>
<div class="row">
<div class="col-md-6 col-sm-6">
<ul>
<li>{{recipe.ingredient1}}</li>
<li>{{recipe.ingredient2}}</li>
<li>{{recipe.ingredient3}}</li>
<li>{{recipe.ingredient4}}</li>
<li>{{recipe.ingredient5}}</li>
<li>{{recipe.ingredient6}}</li>
<li>{{recipe.ingredient7}}</li>
<li>{{recipe.ingredient8}}</li>
<li>{{recipe.ingredient9}}</li>
<li>{{recipe.ingredient10}}</li>
<li>{{recipe.ingredient11}}</li>
<li>{{recipe.ingredient12}}</li>
<li>{{recipe.ingredient13}}</li>
<li>{{recipe.ingredient14}}</li>
<li>{{recipe.ingredient15}}</li>
<li>{{recipe.ingredient16}}</li>
<li>{{recipe.ingredient17}}</li>
<li>{{recipe.ingredient18}}</li>
<li>{{recipe.ingredient19}}</li>
<li>{{recipe.ingredient20}}</li>
</ul>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="directionsandlabel"> <div class="directionsLabel">
Directions</div>
<div class="directions">
<ol>
<li> {{recipe.direction1}}</li>
<li>{{recipe.direction2}}</li>
<li>{{recipe.direction3}}</li>
<li>{{recipe.direction4}}</li>
<li>{{recipe.direction}}</li>
</ol>
</div>
</div></div>
</div>
</div>
</div><!--end ingredients class-->
</div>
</div>
</script>
</body>
</html>
I've created a simple accordion in JSfiddle (http://jsfiddle.net/Rnpb2/) and it works just fine. However when I try to replicate the result on my site, it just isn't working. Pressing on the elements just adds #first, #second and #third at the end of the URL. Probably because I am a rookie the problem is easily solvable but I cannot find it. Here is the whole code of my page:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.accordion.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.all.css"/>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/fabric.min.js"></script>
<script src="lib/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.accordion.js"></script>
</head>
<body>
<div id="page">
<header class="container">
<div id="menu" class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="nav active">Home</li>
<li class="nav">Login</li>
<li class="nav">About</li>
<li class="nav" >Contact</li>
</ul>
</div>
</header>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="accordion" class="panel-group">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#first"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="first">
<div class="panel-body">
<p> First <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#second"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="second">
<div class="panel-body">
<p> Second <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#third"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="third">
<div class="panel-body">
<p> Third <p/>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</body>
</html>
I have added so many different sources in an attempt to make it work, but to no avail. I was adding them one by one.
You need to load jquery before you load bootstrap. If you look at your console you might see an error. Also you should place your scripts at the bottom of you html so that your scripts don't block the UI from loading.
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.accordion.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.all.css"/>
</head>
<body>
<div id="page">
<header class="container">
<div id="menu" class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="nav active">Home</li>
<li class="nav">Login</li>
<li class="nav">About</li>
<li class="nav" >Contact</li>
</ul>
</div>
</header>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="accordion" class="panel-group">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#first"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="first">
<div class="panel-body">
<p> First <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#second"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="second">
<div class="panel-body">
<p> Second <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#third"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="third">
<div class="panel-body">
<p> Third <p/>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<script src="lib/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.accordion.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/fabric.min.js"></script>
</body>
</html>
In the jsfiddle you posted, if you inspect the results you'll see that bootstrap is loaded after jquery.
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.panel-heading {
cursor: pointer;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>