How to - if div has child div, expand this div? - javascript

So if an accordion div has information/a body, how can I alert this? The information is dynamically loaded, and if the div has information (not all do) - it looks like this:
<div class="panel panel-default">
<div class="panel-heading"></div>
<div id="collapse_1" class="accordion-body collapse"></div>
</div>
...other wise it's
<div class="panel panel-default">
<div class="panel-heading"></div>
</div>
so, if the icon for the div I'm clicking has a child with the class .accordion-body...how can I use jQuery to traverse this? So far my idea was:
$('.accordion-toggle > i').click(function () {
if ($(this).closest('.panel-default').has('div.accordion-body')) {
//var open = $(this).toggleClass('fa-chevron-down fa-chevron-up');
//$.toggle('open');
alert('expandable section')
} else {
alert('nothing to expand')
}
});
Thanks in advance.

$('.accordion-toggle > i').click(function () {
if ($(this).closest(".panel-default").children("div").hasClass('accordion-body')) {
//var open = $(this).toggleClass('fa-chevron-down fa-chevron-up');
alert('expandable section')
}else{
alert('nothing to expand')
}
});

Related

Javascript/jQuery - Accordion onclick need to open only current div not all

I’m trying to build an accordion menu and for some reason I can’t get the accordion to function how I want.
Currently when the user clicks on the accordion div, the hidden-textarea div gets added with an active-accordion class wherever it's referenced.
How do I get the active-accordion class to only be added to the current clicked accordion div? Not all of them. I need to be able to toggle between each accordion div that is clicked.
Any help is gladly appreciated.
Thanks!
HTML
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion”>
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="roles-description accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion">
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.active-accordion {
display: block !important;
}
.hidden-textarea {
display: none;
}
JS
TestJs.HorizontalAccordion.prototype.onResize = function() {
$(window).resize(function() {
if ($(window).width() < 1200) {
$('.accordion').on( "click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".hidden-textarea").addClass("active-accordion");
// $('.hidden-textarea').removeClass("active-accordion");
// $('.hidden-textarea').toggle("active-accordion");
return false;
});
}
if ($(window).width() >= 1200) {
}
});
};
Update: I updated the onclick function and am able to toggle successfully. Now I just need to open 1 accordion not all of them.
Any help is gladly appreciated. Thank you.
$('.horizontalAccordionV1 .accordion').on( "click", function() {
event.preventDefault();
// create accordion variables
var accordion = $('.hidden-textarea');
// toggle accordion link open class
accordion.toggleClass("active-accordion");
// toggle accordion content
accordionContent.slideToggle(250);
});
Problem solved! Added this to my JS click function and removed everything else.
$(this).find('.hidden-textarea').toggleClass('active-accordion');

Capture the div when clicked on it

I want to capture a div element when clicked on it using jquery & HTML2Canvas library in an environment where I have multiple div of that same class name.
This is for a console page on which I want to give user an extra choice to capture the div or not, everyone just don't bother about the event listener here I'm using.
$('.panel.panel-default', this).one("mouseenter", function() {
html2canvas(document.getElementsByClassName("panel panel-default")).then(canvas => {
//document.body.appendChild(canvas);
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  
console.log(image);  
window.location.href = image;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<a> this is panel one</a><br><br>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<a> this is panel two</a><br><br>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<a> this is panel three</a><br><br>
</div>
</div>
Actual result should be like when I click on the this is panel one the event will capture that div into the file.
You need to just pass the right context
$('.panel-body').on("click", function () {
html2canvas(this).then(canvas => {
//document.body.appendChild(canvas);
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
console.log(image);
window.location.href = image;
})
});

How to hide panel-body is empty?

I want to hide panel-body if it is empty.
Here's the example: BootPly
Code Javascript:
$(function() {
$('#container').load(function() {
if($.trim($(this).contents().find("container").find('panel-body').length) == 0) {
$(this).hide();
}
});
Code HTML:
<div class="container">
<div class="row clearfix">
<div class="col-md-9 column">
<div class="panel panel-primary">
<div class="panel-heading">Content</div>
<div class="panel-body fixed-panel">
<div class="form-group">
</div>
</div>
</div>
</div>
</div>
</div>
How about something like this? http://www.bootply.com/bKb0isdzKA
$(function() {
$('.form-group').each(function() {
if ($(this).is(':empty')) {
$(this).closest('.container').hide();
}
});
});
You had a few issues. For one, you were using #container as your selector, despite container being a class. Additionally, you were checking to see if body-panel was empty, but it contained a child div, so it would always have HTML content.
The code above will loop through each .form-group and hide the parent container if it's empty.
If this isn't exactly what you had in mind, let me know and I can make adjustments.

put eq() of each panel in the title

<div class="panel panel-default">
<div class="panel-heading">--Here should say 1--</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">--Here should say 2--</div>
<div class="panel-body">
Panel content
</div>
</div>
the following should put if its the 1'st 2'nd 3'rd... panel in the panel header
$(".panel .panel-heading").append($(this).eq());
Use .html() followed by function like below :
$('.panel-heading').html( function ( i, old ) {
return ( i + 1 );
});
DEMO
Did't fully understand what this statement mean the following should put if its the 1'st 2'nd 3'rd, is it you want to put the content only for panel element 1st, 2nd and 3rd only even exist more than that? If that's the case :
$('.panel-heading').html( function ( i, old ) {
if ( i < 3 ) return ( i + 1 );
});
You need to use jquery each along with the index() function with of the panel heading element within the panel heading list.
Elements indexes start from 0 so you need to add 1 to it to view proper numbering:
$(".panel .panel-heading").each(function(){
$(this).append($(this).index('.panel-heading') + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
Panel content
</div>
</div>
$('.panel .panel-heading').each(function(k,v){ $(v).text(k); });
// or if you want to start from 1:
$('.panel .panel-heading').each(function(k,v){ $(v).text(k + 1); });

Making a text disappears when another text appears with jquery

$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
$('.' + elmDay).toggleClass('display');
});
});
Please, visit this site to understand -> http://jsfiddle.net/g42d8pjp/
When you click in the first box, one text with background red will show, right?, them if you click in the other box, other text with a red background will show too.
Can i make the first text with the red background disappear if the second box is clicked??
Add a common class for the boxes like 'day'
<div class="row">
<div data-day="thursday" class="box thursday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div data-day="friday" class="box friday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div class="col-9">
</div>
</div>
<div class="thursday display day">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div class="friday display day">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
Hide elements with this class attached on click.
$(document).ready(function () {
var days = $('.day');
$('.box').on('click', function() {
var elmDay = $(this).data('day');
days.addClass('display');
$('.' + elmDay).toggleClass('display');
});
});
Why don't you just change the css via javascript/jquery? Here is a quickly done updated jsfiddle:
http://jsfiddle.net/ykoo873e/
You can just set all the other styles for those divs to 'display: none' and only set the one:
$('.display').css('display', 'none');
$('.display.' + elmDay).css('display', 'block');
Though you could also just dynamically change the html inside the div like so:
http://jsfiddle.net/m5hL220d/
Try this:
http://jsfiddle.net/g42d8pjp/1/
<div id="thursday" class="thursday display">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div id="friday" class="friday display">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
if (elmDay == 'thursday')
{
$('#thursday').show();
$('#friday').hide();
}else
{
$('#friday').show();
$('#thursday').hide();
}
//$('.' + elmDay).toggleClass('display');
});
});

Categories