We Keep Coding

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.

jquery accordion effect on table [duplicate]

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();
}
}

Show/Hide H4's isn't working

I am having an issue trying to show/hide some h4s. The goal is to click an information li link and show the corresponding h4's text in the next table over (one at a time), but this is not working.
I have tried using .css("display","none/block"), .style("display","none/block"), and a few others in my JQuery.
JSFiddle Demo
The li links code
<table>
<tr>
<th><h2>Quick Facts</h2></th>
</tr>
<tr>
<th>
<ul style="font-size:15px">
<li id="_Join">How to join</li>
<li id="_Who">Who we are</li>
<li id="_Officers">Officers</li>
<li id="_Other1">Other</li>
<li id="_Other2">Other</li>
<li id="_Other3">Other</li>
</ul>
</th>
</tr>
</table>
The h4 text I want to display
<table style="word-wrap: break-word">
<tr>
<th>
<h4 class="informational" id="Join">How to join</h4>
<h4 class="informational" id="Who">Who</h4>
<h4 class="informational" id="Officers">Officers</h4>
<h4 class="informational" id="Other1">Other1</h4>
<h4 class="informational" id="Other2">Other2</h4>
<h4 class="informational" id="Other3">Other3</h4>
</th>
</tr>
</table>
The JQuery
$(document).ready(function () {
$('.informational').hide();
});
$('[id^=_]').click(function () {
$('.informational').hide();
var naming = $(this).attr('id').replace('_', '');
alert("selected ID is: " + naming);
document.getElementById(naming).show();
});
Any help appreciated!
P.S. If there is a better way of doing this please let me know. Thanks!
Using Bootstrap 3 / MVC 5

Replace document.getElementById(naming).show(); with $('#'+naming).show();.
.show() is a jQuery function and you're attempting to use it on a DOM node.
jsFiddle example

Try this, replace document.getElementById(naming).show(); with document.getElementById("naming").style.display = "none";

Toggle visibility between two elements

I have this html table with contents, sub-contents and sub-sub-content, I want to hide all sub-content "inside" the content I'm clicking on.
<table>
<tr class='content'>
<td>Things and things...</td>
<tr class='sub-content'>
<tr class='sub-content'>
<tr class='sub-sub-content'>
<tr class='content'>
<tr class='sub-content'>
<tr class='sub-sub-content'>
<tr class='sub-sub-content'>
<tr class='sub-content'>
<tr class='sub-sub-content'>
<tr class='content'>
...
</table>
I'm trying to do this with jQuery, but I can't get it right. Actually I'm hiding all sub and sub-sub after the clicked content, but I want to hide only sub/sub-sub from clicked content to next content.
$('.content').on('click', function() {
var element = $(this).next('.content');
$(this).nextUntil(element, '.sub-content').toggle();
$(this).nextUntil(element, '.sub-sub-content').toggle();
});
I don't get what I'm missing here.

I think you may be overcomplicating it slightly... Try this instead:
$('.content').on('click', function() {
$(this).nextUntil('.content').toggle();
});
Here is the Fiddle: http://jsfiddle.net/mifi79/KNED6/2/

For me the best way is FIddle
<script type="text/javascript">
$(document).ready(function(){
$('.content').on('click', function() {
$(this).nextUntil('.content').toggle();
});
})
</script>

How to add div to span inside this table row?

I have a table row as such:
<tr class="song-row song-row-selected" data-id="1">
<td data-col="title">
<span class="song-content">
<img src="img/cover3.jpg" />
Song Title
</span>
</td>
<td>3:37</td>
<td>song artist</td>
<td>song album</td>
<td>23</td>
</tr>
I want to add a div to indicate that the song is paused (surrounded by *):
<tr class="song-row song-row-selected" data-id="1">
<td data-col="title">
<span class="song-content">
<img src="img/cover3.jpg" />
Song Title
*<div class="song-indicator loading"></div>*
</span>
</td>
<td>3:37</td>
<td>song artist</td>
<td>song album</td>
<td>23</td>
</tr>
I was hoping to use JQuery. So far I have:
function displayPause() {
$('tr.song-row.song-row-selected:first').each(function() {
$(this).siblings('td span.song-content').add('<div class="song-indicator paused"></div>');
});
}
Needless to say, it doesn't add the div. Also, I would like a function for me to easily remove the div from the span. Does anyone know where to point me in the right direction?

You should be using append as well as children, not siblings
$(this).children('td span.song-content').append('<div class="song-indicator paused"></div><input type="button" class="removeDiv" value="Remove"/>');
I also added a button right next to your div, clicking this will remove that div with this code:
$(document).on("click", ".removeDir", function() {
$(this).prev(".song-indicator").remove();
$(this).remove();
});

append is what you want:
$(this).find('td span.song-content')
.append('<div class="song-indicator paused"></div>');
This will ... append the div to the end of your span.
Also, as tymeJV says, your td is not a sibling of your tr; it's a child. Use either children, or find to grab it.
And to remove it, you'd use remove. If I understand your app correctly, it should be something like this:
$('tr.song-row.song-row-selected:first')
.find("div.song-indicator.paused").remove();

Here a litte sample on jsfiddle
$("tr.song-row-selected:first td span.song-content").append("*<div class='song-indicator loading'></div>*");