I need your help, like the title I have to change the id of the child of a cloned element in Jquery but I don't know how to do that ....
There my code (thanks a lot) :
Jquery :
//Clone news
var i = 0;
body.on("click", "button.clone", function(e) {
e.preventDefault();
i++;
var box = $(this).parent().parent();
var name = "contenu" + i;
box.clone().insertAfter(box).attr("id", name);
});
HTML :
<div class="drag col-md-12">
<div id="content" class="content col-md-12">
<div id="contenu" class="col-md-9">
<span class="text-left">Lorem ipsum dolor sit amet</span>
<span style="float: right;">Jeudi 25/02/2016 | 12:00</span>
<hr>
<h1>Lorem ipsum dolor sit amet</h1>
<br />
<p class="text-justify test" data-type="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<hr>
<img src="img/img_content.png" alt="header" class="img-responsive element_center">
<br />
<br />
</div>
<p class="text-center col-md-3">
<button class="clone btn btn-primary btn-perso">
<span class="glyphicon glyphicon-duplicate" aria-hidden="false"></span>
Dupliquer
</button>
<br />
<button class="delete btn btn-primary btn-perso">
<span class="glyphicon glyphicon-trash" aria-hidden="false"></span>
Supprimer
</button>
</p>
</div>
</div>
Try this
$(box).next().prop("id","new name");
after
box.clone().insertAfter(box).attr("id", name);
https://jsfiddle.net/Ljnxn680/
Related
I'm using the following code to show more/show less on a page.
CSS
#more {display: none;}
.read-more-less{padding-bottom: 20px;text-align: center;display: block !important;margin:auto;width: 200px;height: 40px;font-size: 16px;margin-top: 15px;}
JS
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Show more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Show less";
moreText.style.display = "inline";
}
}
HTML
<div class="show-more">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p><span id="dots"></span><span id="more">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</span><a class="read-more-less btn" href="#"><span onclick="myFunction()" id="myBtn">Show more</span></a>
</div>
This the jsfiddle
Now if the html block is placed within another div (like an include) where "class="change"
<div class="change">
<div class="show-more">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p><span id="dots"></span><span id="more">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</span><a class="read-more-less btn" href="#"><span onclick="myFunction()" id="myBtn">Show more</span></a>
</div>
</div>
Is there a way of changing the child div class class="show-more" to class="show-none"
How could this be done?
You can use CSS to do this.
It is easiest if you always print the span tag and then only display it when necessary. Also, instead of using 'show-button', it would be easier to use 'hide-button':
<div class="hide-button"><!-- content is hidden -->
<span id="dots"></span><span id="more">
</div>
<div class=""><!-- content is displayed -->
<span id="dots"></span><span id="more">
</div>
<style>
.hide-button {
display: none;
}
</style>
EDIT (in response to edited question):
There are a couple of ways to get the element that you want to change the class for. You can use either of the following lines of code:
// Get an element using its class name
var elem = document.getElementsByClassName('show-more')[0];
// OR
// Get an element using its CSS selector
var elem = document.querySelector('.show-more');
Once you have the element that you want to adjust the classes for, you can make the adjustments using code similar to the following:
// 'show-more' class is present
if (elem.classList.contains('show-more')) {
elem.classList.remove('show-more');
elem.classList.add('show-none');
// 'show-more' class is NOT present
} else {
elem.classList.remove('show-none');
elem.classList.add('show-more');
}
I have been trying to develop a web blog app, where people can come and upload different blogs and can read blogs uploaded by others too. I was able to successfully upload the data on the firebase real-time database, but I am facing an issue while trying to retrieve data from firebase. I have a card from google material library and I want the title and desc to be displayed there below. But whenever I am trying to retrieve the data only data from the last node is getting displayed. Below is my code for html and javascript.
HTML code:
<div class="w">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="titlePost">Welcome</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="post.html">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
Javascript code:
var rootRef = firebase.database().ref().child("posts");
rootRef.on("child_added",snap =>{
var title = snap.child("Title").val();
var desc = snap.child("desc").val();
$("#titlePost").text(title);
$("#descPost").text(desc);
});
Below is the pic of my database.
and here's what my retrieved data looks like
enter image description here
Only one node is retrieved
Put your posts in a list so that a new child won't replace your old child, if it is in a list it will just extend the list. Your parent in this case is the
"ul" which is callled "blog-posts", and you are going to append childs to this list like in the example below. Your children will expand this list and not overwrite each other
<body>
<div>
<ul class="blog-posts">
<li>
<!--Your Posts are here-->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="titlePost">Welcome</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
</ul>
</div>
parent.append(`
<li>
<div class="w">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="${key}">${title}</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
${desc}
</div>
</div>
<li/>`
);
Only one node is retrieved
That seems unlikely. You can easily check this, by adding some simple logging and then checking the developer console of your browser:
rootRef.on("child_added",snap =>{
var title = snap.child("Title").val();
var desc = snap.child("desc").val();
console.log(title);
$("#titlePost").text(title);
$("#descPost").text(desc);
});
My expectation is that you'll see each title being logged. But since you always call $("#titlePost").text(title);, you only see the title of the last post in the HTML.
A simple fix is to just append the titles in the HTML:
$("#titlePost").append(title);
Now with this, you'll see all titles concatenated together. That's the correct content, but it probably looks horrible.
So the proper solution is to generate a bit of HTML around each title and description. As far as I can see, this is what you use:
rootRef.on("child_added",snap =>{
var key = snap.key;
var title = snap.child("Title").val();
var desc = snap.child("desc").val();
var parent = $("#titlePost").parent().parent().parent();
parent.append(`<div class="w">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="${key}">${title}</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
${desc}
</div>
</div>`
);
});
I am struggling with this. All of the divs open and close when you click on their buttons. But what I want them to do is the following: If one div is open and I click a button to open the next I want the open one to close and the new one to open if that makes sense. Here is a link to the code:
https://codepen.io/iamdesfranco/pen/QNVqLO
<div class="container-fluid hidden-xs">
<div class="row blue">
<!-- Block One -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
<!-- Block Two -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Personal Involvement</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aPInvolveD" aria-expanded="false" aria-controls="aPInvolveD" >
See More
</a>
</div>
</div>
<!-- Block Three -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
</div>
</div>
<!-- ALL ACCORDIONS FOR DESKTOP AND TABLET
=========================================== -->
<!-- ACCORDION 1 -->
<div class="collapse blue" id="aPInvolveD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ACCORDION 2 -->
<div class="collapse blue " id="aClientD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ACCORDION 3 -->
<div class="collapse blue " id="aTestD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ROW TWO
==============-->
<div class="container-fluid blue hidden-xs">
<div class="row">
<!-- Block One -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Our Clients</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aClientD" aria-expanded="false" aria-controls="aClientD">
See More
</a>
</div>
</div>
<!-- Block Two -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
<!-- Block Three -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Testimonials</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aTestD" aria-expanded="false" aria-controls="aTestD">
See More
</a>
</div>
</div>
</div>
</div>
Try the following
$('.collapse').on('show.bs.collapse', function () {
$('.collapse').not($(this)).collapse('hide');
});
demo https://codepen.io/anon/pen/dMqVOY
Wrap all the collapsable divs in a parent div
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
Then wrap each one in a panel div
<div class="panel">
And then reference the parent for each toggle button
parent="#accordion"
https://codepen.io/partypete25/pen/BKOwzZ
I have created one page in that there is on button like MORE.if i click on MORE next page will display.In next page there are 5 accordion tab created..the issue is that accordion tab click event is not working.Please help me..
<html>
<head>
<meta charset="utf-8">
<title>DUMMY</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/themes.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.accordion-toggle{
display:inline-block;
width:100%;
}
</style>
</head>
<body class="blue-skin">
<div class="wrapper">
<!-- SECTION -->
<section id="home">
<div class="wrap inverse bg-dark vpadding-strong anima">
</div>
</section>
<section id="advs">
<div class="wrap">
<header class="content-header"></header>
<article id="fumeExhaustSystem" class="container_12 content center">
<div class="grid_1"></div>
<div class="grid_10">
<div class="grid_6">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<span>More</span>
</div>
</div>
<div class="grid_1"></div>
</article>
<footer class="content-footer"></footer>
</div>
</section>
</div> <!-- /wrapper -->
<div class="overlay"></div> <!-- overlay layer -->
<!-- POPUP: portfolio -->
<div id="work-popup-2" class="popup work-popup">
<div class="slides-container fullslider">
<ul class="sliderwrap">
<li><div class="bgimg"><img src="images/slides/slide-3.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-4.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-5.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-6.jpg" alt=""></div></li>
<li><div class="bgimg"><img src="images/slides/slide-9.jpg" alt=""></div></li>
</ul>
</div>
<div class="container_12 vpadding">
<div class="grid_3">
<h2> System</h2>
</div>
<div class="grid_9">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<div class="panel-group" id="accordion">
<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">
1.
</a><i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
<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">
2.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>
<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">
3.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div> <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">
4.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsefive">
5.
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
</div>
<script>
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
</script>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.plugins.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
What you are doing here is that you are collapsing div on click of anchor tag.
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
and it's working fine, but maybe you want it to be opened on click of whole slide,
you can do it with CSS workaround by making anchor spread on whole clickable panel.
see the attached fiddle for more info
Updated Fiddle : http://jsfiddle.net/RockRathore/f6au4bn9/3/
That's basically my question, here a Plunker
http://plnkr.co/edit/SNFy2XcOBefUavG1QCqD?p=preview
<button class="btn btn-default"
data-template="customer.tpl.html"
bs-modal="modal">New Customer
</button>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" ng-show="title">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="modal-title" ng-bind="title">Hello</h4>
</div>
<div class="modal-body" ng-bind="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
why ?
It is showing the template, but it does not seems that way because you have ng-bind="content" in the template. This means that the modal will replace any modal-body content with the content of the data-content attribute (or if passed by javascript). Your data-content is nothing, so the "Lorem ipsum ..." is replaced with "".
So change
<div class="modal-body" ng-bind="content">
to
<div class="modal-body">
and it works.
forked plnkr -> http://plnkr.co/edit/18cyHRx8fQ6gXrdLnWG8?p=preview