I am using bootstrap panel to display data and there is a description field which i am displaying in panel body
I want to implement read more and read less link for description field in panel body
Here is what i have done until now
function readmore(data){
if (data.length > 100) {
// truncate string
datacut = data.substring( 0, 50);
// make sure it ends in a word so assassinate doesn't become ass...
data2 = datacut + '<span id="restOfArticle" style="display:none">'+ data.substring( datacut.length, data.length);+'</span>' ;
return data2 + '<a onclick=showMoreOrLess(this,"restOfArticle") >..Read more</a>';
}
return data;
}
function showMoreOrLess(thisObj,bonusContent){
var caption = thisObj.innerHTML;
//alert(caption);
if ( caption == "..Read more" ) {
document.getElementById(bonusContent).style.display = "inline";
thisObj.innerHTML = "..Read less";
} else {
document.getElementById(bonusContent).style.display = "none";
thisObj.innerHTML = "..Read more";
}
}
Read more and read less is working fine but its not right after the hidden content is finished but its in new div and when i click on the read more it collapses the panel body
Here is how i display the html data using jquery and webservice
<div class="panel-group" id="accordion">
<div data-toggle="collapse" href="#collapse0" class="panel panel-default panel-style row event-row" id="panel0">
<div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">test</h4>
<div class="pull-right">
<button type="button" id="5" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
id="i5" class="glyphicon glyphicon-plus"></i> Check in
</button>
<span class="label label-default badge-round pull-right label-checkin">1 </span></div>
</div>
<div id="collapse0" class="panel-collapse collapse">
<div class="panel-body">
<div><p>test<strong> description</strong></p>
</div>
<div>
<button id="5" data-toggle="modal" data-target="#myModal" type="button"
class="btn btn-danger btn-sm location-btn center-block"><span
class="glyphicon glyphicon-map-marker"></span>00 Piter Street, New South Wales,
Australia
</button>
</div>
</div>
</div>
</div>
<div data-toggle="collapse" href="#collapse1" class="panel panel-default panel-style row event-row collapsed"
id="panel1" aria-expanded="false">
<div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">show jumping test 1</h4>
<div class="pull-right">
<button type="button" id="10" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
id="i10" class="glyphicon glyphicon-plus"></i> Check in
</button>
<span class="label label-default badge-round pull-right label-checkin">1 </span></div>
</div>
<div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div><p><strong>This is a very long description written<span id="restOfArticle" style="display:none"> just to test the word wrap and make it more compatible with the mobile screen. ThisIsAVeryVeryLongWordWrittenToTestWordWrapCSSIHopeItWorks</span></strong>
</p>
<a onclick="showMoreOrLess(this,"restOfArticle")">..Read more</a></div>
<div>
<button id="10" data-toggle="modal" data-target="#myModal" type="button"
class="btn btn-danger btn-sm location-btn center-block"><span
class="glyphicon glyphicon-map-marker"></span>500 Piter Street, New South Wales,
Australia
</button>
</div>
</div>
</div>
</div>
What should i do to keep that body open and display the data
Thank you
I'll provide a simple solution that you can adapt. Check this code one: http://jsfiddle.net/c7pcu5gy/
Related
Im kind of new to this. I would like to add and remove buttons from a tab, however i can't do it properly. It seems fairly simple but i wont work with the new buttons created using javascript. Please help me. Thanks in advance
<div class="col-lg-6 col-sm-6">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="..." id="dynagregarmarca">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
<div class='btn-group' role='group'>
<button type='button' id='following' class='btn btn-default' href='#tab3' data-toggle='tab'><span class='glyphicon glyphicon-user' aria-hidden='true'></span>
<div class='hidden-xs'>Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content" id="tabcontent">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class='tab-pane fade in' id='tab3'>
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
<input type="button" id="btnagregarmarcatab" value="Add tab" />
<input type="button" id="btneliminarmarcatab" value="remove Selected tab" />
<script>
$(document).on("click", ".btn-pref .btn", function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass("btn-primary");
});
$(document).on("click", "#btnagregarmarcatab", function () {
var menu_html = "<div class='btn-group' role='group'>" +
"<button type='button' id='followings' class='btn btn-default' href='#tab3' data-toggle='tab'><span class='glyphicon glyphicon-user' aria-hidden='true'></span>" +
"<div class='hidden-xs'>Following</div>" +
"</button>" +
"</div>";
var content = "<div class='tab-pane fade in' id='tab3'>" +
"<h3>This is tab 3</h3>" +
"</div>";
$("#dynagregarmarca").append(menu_html);
$("#tabcontent").append(content);
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass("btn-primary");
});
$(document).on("click", "#btneliminarmarcatab", function () {
let elementoprimary = $(".btn-primary");
$(elementoprimary).parent().remove();
});
</script>
It only works removing the default buttons, but it removes everything if I try to remove the created buttons. Please I need some help or advice. Thanks a lot in advance. I need to do it the simple way.
You haven't specified what parent should be removed. So instead of
$(elementoprimary).parent().remove();
you should use
elementoprimary.closest(".btn-group").remove();
You also should use closest instead of parent, because closest is much safer if your DOM layout changes.
I have a blue and a red box. I would like to drag and drop them, so that they can be switched. For now, I can drag the left box and drop it in the right box. That works fine but I cannot drag the right box and drop it in the left box.
// Drag and the drop the items
const elements = document.querySelectorAll('#title-drag, #storename-drag');
for (let element of elements) {
// Allow the drop
element.addEventListener("dragover", function(event) {
event.preventDefault();
}, false);
element.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text", event.target.id);
}, false);
element.addEventListener('drop', function(event) {
let data = event.dataTransfer.getData("text");
console.log(event.target.className);
event.preventDefault();
element.appendChild(document.getElementById(data));
});
}
#title {
background: red;
}
#storename {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<!-- Title -->
<div class="row">
<div id="title-drag">
<div class="col-md-3" draggable="true" id="title">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Gibt den Seitentitel aus'>
<span class="name">TITLE</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div><!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div><!-- /input-btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div><!-- /mg-item-inner -->
</div><!-- /mg-item -->
</div>
<!--STORE NANE -->
<div id="storename-drag">
<div class="col-md-3" draggable="true" id="storename">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Fügt den Storename hinzu'>
<span class="name">STORENAME</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div><!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div><!-- /input-btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div><!-- /mg-item-inner -->
</div><!-- /mg-item -->
</div>
</div>
</div>
https://jsfiddle.net/Lb8e0pz3/
Why can I drop the left box but not the right one?
It just because you do
element.appendChild(document.getElementById(data));
which always add item as last children... So moved element will be always last - that's why if you move second item, it will still be displayed as second. From the pure code perspective, everything works.
you could see if the target is the first element of the parent, and if so add:
if (isFirstElement(event.target)) { // implement function
element.parentNode.prepend(document.getElementById(data+'-drag'));
} else {
element.parentNode.appendChild(document.getElementById(data+'-drag'));
}
I have a page with posts, comments and replies. Posts can have many comments, and each comment can have many replies - similar to the way Facebook works.
I am adding these dynamically via an ajax call to each post.
At the end of each list of replies there is a reply form. The problem I am having is when a new reply is added to a comment, I am unable to insert the reply before the reply form - which is the last child of the li.
Here is my js:
var $div = $('.js-post-show');
function _addComment(comment) {
var tplText = $('#js-comment-template').html();
var tpl = _.template(tplText);
var html = tpl(comment);
$div.find('.js-comment-list')
.append($.parseHTML(html));
}
function _addReply(reply, commentId) {
var tplText = $('#js-reply-template').html();
var tpl = _.template(tplText);
var html = tpl(reply);
$div.find("li[data-comment-id='" + commentId + "']")
.append($.parseHTML(html));
}
function _loadReplyForm(comment) {
var tplText = $('#js-reply-form-template').html();
var tpl = _.template(tplText);
var html = tpl(comment);
$div.find("li[data-comment-id='" + comment.id + "']")
.append($.parseHTML(html));
}
And here is my HTML:
<li class="list-group-item py-4 comment-list" data-comment-id="871">
<div class="media">
<div class="avatar avatar-sm">JD</div>
<div class="media-body">
<div class="mb-2">
<span class="h6 mb-0">John Doe</span>
</div>
<p>
Comment here...
</p>
<div class="d-flex align-items-center">
<div class="mr-2">
<button class="btn btn-sm btn-outline-primary" data-target="#create-reply-871" data-toggle="collapse" aria-expanded="true" aria-controls="create-reply-871">Reply</button>
<button class="btn btn-sm btn-outline-primary js-like-comment" data-url="/api/comments/871/toggle-comment-like" data-is-liked="1">
<span class="fas fa-thumbs-up"></span>
<span class="js-like-comment-count">1</span>
</button>
</div>
</div>
</div>
</div>
<div class="media">
<div class="avatar avatar-sm">JD</div>
<div class="media-body">
<div class="mb-2">
<span class="h6 mb-0">Jane Doe</span>
</div>
<p>
Reply here...
</p>
<div class="d-flex align-items-center">
<div class="mr-2">
<button class="btn btn-sm btn-outline-primary" data-target="#create-reply-24" data-toggle="collapse" aria-expanded="false" aria-controls="create-reply-24">Reply</button>
<button class="btn btn-sm btn-outline-primary js-like-reply" data-url="/api/replies/24/toggle-reply-like" data-is-liked="0">
<span class="far fa-thumbs-up"></span>
<span class="js-like-reply-count">0</span>
</button>
</div>
</div>
</div>
</div>
<div class="media">
<div class="avatar avatar-sm">RS</div>
<div class="media-body">
<div class="mb-2">
<span class="h6 mb-0">Rob Smith</span>
</div>
<p>
Another reply
</p>
<div class="d-flex align-items-center">
<div class="mr-2">
<button class="btn btn-sm btn-outline-primary" data-target="#create-reply-25" data-toggle="collapse" aria-expanded="false" aria-controls="create-reply-25">Reply</button>
<button class="btn btn-sm btn-outline-primary js-like-reply" data-url="/api/replies/25/toggle-reply-like" data-is-liked="0">
<span class="far fa-thumbs-up"></span>
<span class="js-like-reply-count">0</span>
</button>
</div>
</div>
</div>
</div>
<div class="media js-create-reply collapse show" id="create-reply-871" style="">
<div class="media-body">
<form method="post" class="card-body js-create-reply-form needs-validation" novalidate="novalidate" data-url="/api/replies/871">
<div class="form-group"><textarea id="reply" name="reply" required="required" class="from-control-lg js-create-reply-textarea form-control" rows="4" placeholder="Type your reply here"></textarea></div>
<div class="d-flex align-items-center">
<button type="submit" class="btn btn-success mr-3 js-create-reply-button">Submit your reply</button>
Cancel
</div>
</form>
</div>
</div>
</li>
I have tried insertBefore() but without success, any advice would be greatly appreciated.
You can use insertAfter() jquery function : http://api.jquery.com/insertafter/
also you target the last reply using :last in your selector like
$(replyHtml).insertAfter("#js-reply-template li:last");
I've got multiple accordions from Bootstrap 4. I want a single accordion to move up/down when I click its corresponding arrow. How do I go about this in JS or jQuery?
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h3 class="mb-0">
<a data-toggle="collapse" data-parent="#testchild" href="#section-1" aria-expanded="true" aria-controls="collapseOne">
Disco Full Overview
</a>
<a href="#">
<button class="btn btn-success pull-right">
<i class="mdi mdi-tooltip-edit"></i> Edit
</button>
</a>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
</button>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
</button>
</h3>
</div>
<div id="section-1" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h3 class="mb-0">
<a data-toggle="collapse" data-parent="#testchild" href="#section-2" aria-expanded="true" aria-controls="collapseOne">
Disco Test
</a>
<a href="#">
<button class="btn btn-success pull-right">
<i class="mdi mdi-tooltip-edit"></i> Edit
</button>
</a>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
</button>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
</button>
</h3>
</div>
<div id="section-2" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
...
</div>
</div>
</div>
I've already set up the arrow keys but I don't know how to do this.
Edit.
I've found about insertafter and insertbefore but I don't know how parent and child works. Because the up/down button is child to the other elements and I don't know how to address the entire accordion.
I have a multistep form and would like to utilize jquery and bootstrap to achieve the following functionality:
When user clicks on the legend, its corresponding fieldset expands
When user clicks 'next' button, that fieldset closes and the next one opens
When user clicks 'previous' button, that fieldset closes and previous one opens
All of these behaviors should toggle the glyphicon-plus-sign glyphicon-minus-sign icon. My jquery code is below the html.
HTML:
<fieldset>
<legend class="bg-info"><span class="badge progress-bar-info" style="font-size:18px;">1</span> Registration Details <span class="glyphicon glyphicon-minus-sign pull-right" aria-hidden="true"></span></legend>
<div class="form_container">Content</div>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<legend class="bg-info"><span class="badge progress-bar-info" style="font-size:18px;">2</span> Age Groups and Divisions <span class="glyphicon glyphicon-plus-sign pull-right" aria-hidden="true"></span></legend>
<div class="form_container" style="display:none;">Content</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
JQUERY:
$(function(){
// Set cursor to pointer and add click function
$("legend").css("cursor","pointer").click(function(){
var legend = $(this);
$(this).siblings().slideToggle("slow", function() { legend.children(".glyphicon").toggleClass("glyphicon-plus-sign glyphicon-minus-sign"); } );
});
});
$(".next").click(function(){
current_fs = $(this).parent();
next_fs = $(this).parent().next("fieldset");
$(this).closest(".form_container").slideToggle("slow", function() { current_fs.closest("legend span.glyphicon").toggleClass("glyphicon-plus-sign glyphicon-minus-sign"); } );
$(this).next(".form_container").slideToggle("slow", function() { $(this).parent().children("legend.glyphicon").toggleClass("glyphicon-plus-sign glyphicon-minus-sign"); } );
});
You can do this using bootstrap's built in accordion and adding a little bit of javascript to control the icons:
Here's a bootply example: http://www.bootply.com/WSrtmlu4W3
HTML
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Registration Details <span class="glyphicon glyphicon-minus"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>blah blah blah</p>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" class="btn btn-default">Next</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Age Groups and Divisions <span class="glyphicon glyphicon-plus"></span>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>blah blah blah</p>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-default">Previous</a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree" class="btn btn-default">Next</a>
</div>
</div>
</div>
</div>
JS
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
});
$('.collapse').on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});