jquery accordion effect on table [duplicate] - javascript

This question already has answers here:
jQuery - Accordion Effect on a Table
(2 answers)
Closed 5 years ago.
I have a table of the following structure:
<table class="table">
<tbody>
<tr>
<td>
<div class="heading_accordion">
some text..
</div>
<div class="body_accordion">
some more text...
</div>
</td>
</tr>
<tr>
<td>
<div class="heading_accordion">
some other text..
</div>
<div class="body_accordion">
some more other text...
</div>
</td>
</tr>
</tbody>
</table>
and I am using this function to create an accordion effect (the table to load showing only the heading div and showing the body div when the heading div is clicked):
function the_accordion() {
$('.table').each(function() {
var thead = $(this).find('.heading_accordion');
var tbody = $(this).find('.body_accordion');
tbody.hide();
thead.click(function() {
tbody.toggle();
})
});
}
The problem I have is that when I click a row they all are toggled. I would like to individually alter the state of the rows so that only the one that is clicked is toggled and the rest remain untoggled.

you can use this function, or something like that
function init_accordion() {
$(".heading_accordion".click(function() {
var tbody = $(this).find('.body_accordion');
tbody.toggle();
}
}

Related

When display component reportdetails it display below menu?

problem
second component - table html display below menu but i need it display on right of menu .
I work on angular 7 and I have two components
first component is report component contain on left side menu and it is be router outlet on app.component
second component is table html exist on reportdetails component and generated when click link menu .
first component report contain menu
<p>report-category works!</p>
<table *ngFor="let rep of reportlist">
<tr>
<td>{{rep.reportCategory}}</td>
</tr>
<tr *ngFor="let subrep of subreportlist">
<div *ngIf="subrep.reportCategoryID === rep.reportCategoryID">
<a href="/reportdetails?id={{subrep.reportID}}">
<i class="{{subrep.IconClass}}"></i>
<span class="title">{{subrep.reportName}}</span>
</a>
</div>
</tr>
</table>
second is report component contain table that display below menu and this is wrong
the correct i need is to display right of menu as picture below
reportdetails works!
<p>reportdetails works!</p>
<div>
<table class="table table-hover" >
<thead>
<tr>
<th>regulation</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
<td>{{rep.regulation}}</td>
</tr>
</tbody>
</table>
<p>reportdetails works!</p>
<div>
<table class="table table-hover" >
<thead>
<tr>
<th>regulation</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
<td>{{rep.regulation}}</td>
</tr>
</tbody>
</table>
</div>
fiddle link as below :
https://jsfiddle.net/015asjzv/1/
what I try
table{
float:right;
width:auto;
}
Last Updated
see link here
http://www.mediafire.com/view/wnptffqakjglkre/correctdata.png/file
it moved table from left to right but i need it top beside menu so what i do
So for what I can see at the moment u have 2 tables wrapped by divs that's why they show as block(divs have display: block; by default)
add another div around these 2
<div class='wrapper'>
// You have to make sure only this divs are direct child of wrapper.
// div table 1 || you can just remove the div and add table directly
// div table 2 || as divs with no class dont add any value
</div>
// css
.wrapper {
display: flex;
}
Good luck.
You can learn more of display flex here
Note: This could also be an issue of the parent component layout, but the fix would be the same.

Modal window for several products

I have a problem. I need to make a modal window for each product, but in the modal window, all products only display the last product. I tried to assign id identifiers, but then only the modal window of the first product works.
window.onload = function() {
$('.img-for-modal').click(function() {
$('.modal').css('display', 'block');
});
$('.close').click(function() {
$('.modal').css('display', 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>
I suggest you change to this which will show the nearest modal and close the nearest modal. Your current code selects all items with class modal
Note I use jQuery $(function() { ... }); instead of window.onload = function() { ... }
$(function() {
$('.img-for-modal').click(function() {
$(this).next(".modal").show();
});
$('.close').click(function() {
$(this).closest(".modal").hide();
});
});
.modal { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>
Because you are selecting all the modals on the page and showing them all.
$('.modal').css('display', 'block');
You are not selecting the modal that corresponds with what you picked. In your case the modal is beside the image so grab the next element and display it.
$(this).next('.modal').css('display', 'block');
Other option people tend to do is data attributes and ids. You add a data attribute that has the id of the item you want to show. So you read the attribute, and than show that item.
<img class="img-for-modal" src="media/products-image/1.jpg" data-toggles="#modal1">
<div class="modal" id="modal1">
and than the JavaScript would look at the attribute
var selector = $(this).data("toggles")
$(selector).css('display', 'block');
If you are in need of your modals to display dynamic content, and you are not using a framework like Angular or React to update the components for you - then you will want to use a dedicated modal library. This will help you manage multiple modal instances, as well as all of your display bindings.
I have used Bootbox.js in the past for this purpose - if you are using Bootstrap, check it out. If you are not using Bootstrap, there are other plugins that will help you accomplish the same task.
The trouble with modals is that by design there can only be a single instance at any one time (think Singleton). So each time you call it, you are calling the same instance. So...if you try to populate multiple instances - it wont happen. Only or last data set will be applied.
The problem with using
http://bootboxjs.com/

Copy google charts to another div doesn't work in IE

My HTML page using css materialize tabs.
I build all my google chart graphs in 'show' table divs, after it I 'hide' them and when the user click on tab I replace the html tab with the correct one from the 'hide' divs.
In google chrome and firefox it works good, but in IE it doesn't work :(
<div id="row1">
<br />
<table align="center" style="background-color:white">
<tr valign="top">
...
</tr>
<tr valign="top">
...
</tr>
</table>
<br />
</div>
<div id="row2">
<br />
<table align="center" style="background-color:white;">
<tr valign="top">
...
</tr>
<tr valign="top">
...
</tr>
</table>
<br />
</div>
<div class="col s12" id="dashboardtabs">
<ul class="tabs" style="background-color:#80CBC4" id="tabs">
<li class="tab col s3"><a id="titletab1" class="white-text" href="#tab1" onclick="reloadForTabs('titletab1')" style="background-color:#009688">Subjects Status</a></li>
<li class="tab col s3"><a id="titletab2" href="#tab2" class="white-text" onclick="reloadForTabs('titletab2')" style="background-color:#80CBC4">Stratification</a></li>
</ul>
</div>
<div id="tab1" class="col s12"></div>
<div id="tab2" class="col s12"></div>
My js Code:
at the first load change all the rows div to show - google charts need to build on show divs for support user settings (width, high and etc.):
var emptyTabs = function()
{
titletabs.forEach(function (val) {
$('#tab' + val.slice(-1)).html('');
});
}
emptyTabs();
//Changed chart divs from hide to show
titletabs.forEach(function (val) {
$('#row' + val.slice(-1))[0].style.display = 'block';
});
After the user selected tab:
//Changed chart divs from show to hide
titletabs.forEach(function (val) {
$('#row' + val.slice(-1))[0].style.display = 'none';
});
//Display the selected tab (After filters, in the first load and etc.)
var selectedtab = document.getElementsByClassName('white-text active')[0].id;
$('#tab' + selectedtab.slice(-1)).html($('#row' + selectedtab.slice(-1)).html());
In IE the graphs in the 'hide' divs (not in tabs) display correctly, but when the html div insert into the tab - the data is empty, The graph displays with all its properties but without data (bar chart - without the bars).
like this:
And not like this:
Open https://jsfiddle.net/wjqwd467/ in google chrome and in IE and see the different...
Could someone help me?
Thanks!
for starters, Object.values isn't compatible with IE
see --> Object.values() - browser compatibility
try replacing with...
for (var i = 0; i < arraydata.length; i++) {
var daraarr = [];
for (var key in arraydata[i]) {
if (arraydata[i].hasOwnProperty(key)) {
daraarr.push(arraydata[i][key]);
}
}
daraarr.push("color:" + mycolor[arraydata[i].rownum]);
datatable.addRow(daraarr);
}

Jquery Accordion function, alter class of parent

I have a bootstrap accordion table which is working fine. The glyphicon indicates which tablerows children-row is currently expanded. But something with the function seems to be wrong it doesn't change the class of the ancestor element as expected.
$('.accordion-text').on('shown.bs.collapse', function () {
$(this).closest(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('.accordion-text').on('hidden.bs.collapse', function () {
$(this).closest(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
Full code: http://jsfiddle.net/7pwg1j5f/616/
<tbody>
<tr id="package1" class="accordion-toggle" data-toggle="collapse" data-parent="#OrderPackages" data-target=".packageDetails1">
<td>123456</td>
<td>3</td>
<td><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</td>
</tr>
<tr>
<td colspan="3" class="hiddenRow">
<div class="accordion-text accordion-body collapse packageDetails1" id="">
<table>
<tr>
<td>Revealed item 1</td>
</tr>
<tr>
<td>Revealed item 2</td>
</tr>
</table>
</div>
</td>
</tr>
The way you were finding your .indicator element was not proper. It resides in the previous tr of .accordion elements parent tr. Just follow the structure and you will get the proper element. Also, you can combine both the events and use toggleClass instead of addClass and removeClass. So below is the updated solution.
$('.accordion1').on('shown.bs.collapse hidden.bs.collapse', function () {
$(this).closest('tr').prev(".accordion-toggle").find('.indicator').toggleClass("glyphicon-chevron-up glyphicon-chevron-down");
});
.closest('tr') - fetches the parent of .accordion1 div.
.prev('.accordion-toggle') - fetches the previous sibling of the
earlier obtained parent.
.find('.indicator') - find the .indicator element.
.toggleClass - toggles [add/removes] respective class.
Here is the Updated DEMO
Also note that I've made some changes in html to match the class
The problem is that your parents selector will never pickup cells from the previous row, you should select row, switch to previous and then find relevant element under that row:
$('.accordion1').on('show.bs.collapse', function () {
$(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('.accordion1').on('hide.bs.collapse', function () {
$(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

Need help to form Jquery to slide a table row down if mouse hovers over previous(one up) table row

Only scrolls up on pageload so far and even then the animation is jittery
and ugly. I suspect it's something to do with me wanting to use this on tr element.
<table>
<tr class="ItemHeading">
<td>ItemName</td>
</tr>
<tr class="ItemDescription">
<td>
<ul>
<li>Item spec</li>
</ul>
</td>
</tr>
</table>
<script type="text/javascript">
$(".ItemDescription").slideUp(300);
$(".ItemHeading").hover(function () {
$(this).next("tr").slideDown(300);
});
$(".ItemHeading").mouseleave(function () {
$(this).next("tr").slideUp(300);
});
// $(document).ready(function() { $(".ItemDescription").slideUp(300); } );
</script>
The below works fine, but it doesn't slide the table row up and down, just hides and shows. Provided
I set the .ItemDescription css display property to none.
$('.ItemHeading').hover(function () {
$(this).next("tr").css("display", "block");
$(this).mouseleave(function () { $(".ItemDescription").css("display", "none"); });
});
I would strongly suggest against tables with animations. It's just not going to give you the results you're looking for.
Also, you're using closest incorrectly. closest will go up the DOM to find the "closest" parent that matches the provided selector. You're looking for next which will select the following row.
html:
<div class="table">
<div class="tr ItemHeading">
<div class="td">ItemName</div>
</div>
<div class="tr ItemDescription">
<div class="td">
<ul>
<li>Item spec</li>
</ul>
</div>
</div>
</div>
jQuery:
$(".ItemDescription").slideUp(300);
$(".ItemHeading").hover(
function () {
$(this).next(".tr").slideDown(300);
},
function() {
$(this).next(".tr").slideUp(300);
}
);
Working example here: http://jsfiddle.net/VKBYy/1/

Categories