We Keep Coding

Not able to reverse changes to HTML DOM style on close button

I have 4 divs with bootstrap col-md-3 class. When clicked on any Div, I am expanding width of that div to 100%, showing expanded contents and hiding(display:none) other divs.
On close button, I want to reverse changes, so I am trying to assign 25% width, hinding expanded contents and making other divs visible(display:block).
But changes are not getting reflected.
function openTab(tab) {
var i, x, y;
x = document.getElementsByClassName("containerTab");
y = document.getElementsByClassName("OuterTab");
for (i = 0; i < x.length; i++)
{
if(i==tab-1)
{
y[i].style.width="100%";
y[i].style.transition= "width 0.5s ease-in";
x[i].style.maxHeight="5000px";
x[i].style.transition= "max-height 1s ease-in";
}
else
{
y[i].style.display="none";
}
}
}
function closeTab(tab)
{
var i, x, y,z, a;
x = document.getElementsByClassName("containerTab");
y = document.getElementsByClassName("OuterTab");
for (i = 0; i < x.length; i++)
{
if(i==tab-1)
{
y[i].style.width= "25%";
y[i].style.transition= "width 0.5s ease-in";
x[i].style.maxHeight = "0px";
x[i].style.transition= "max-height 1s ease-in";
}
else
{
y[i].style.display = "block";
}
}
}
.border1{border: 1px solid; border-radius: 5px;padding:2px}
.border2{border: 1px solid; border-radius: 7px;padding:10px}
.containerTab {
cursor: pointer;
color: black;
max-height: 0;
min-height:0;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="padding:10px">
<div class="row">
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(1);" style="">
<div class="border1">
<div class="border2">
content 1
</div>
<div id="b1" class="containerTab" style="">
Expanded content 1
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(2);" style="">
<div class="border1">
<div class="border2">
content 2
</div>
<div id="b2" class="containerTab" style="width:100%;">
Expanded content 2
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(3);" style="">
<div class="border1">
<div class="border2">
content 3
</div>
<div id="b3" class="containerTab" style="width:100%;">
Expanded content 3
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(4);" style="">
<div class="border1">
<div class="border2">
content 4
</div>
<div id="b3" class="containerTab" style="width:100%;">
Expanded content 4
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
</div>

Instead of re-applying the individual styles. Apply the new styles by simply adding a CSS class. Then on the click of the Close button, simply remove that class, which will cause the affected elements to revert to their previous style.

addClass and removeClass in jQuery - not removing class
Got answer in this post. Seems the problem was due to event bubbling as close button was inside clickable div, both closetab tab and opentab events were getting called. Worked fine when moved "close" button outside div.

Display div when clicking on another div

I've added three pictures. Look at them please.
What is the best solution to create something like this? I would create after each row a big container and this container is collapsed. After clicking on one of the 3 overlying containers I would fill the container with the text and show it. But what happens when the display can't show 3 divs in a row, because I will use flex boxes? Is there a better solution with much less jquery?

Maybe something like this is a good place to start:
https://jsfiddle.net/547ec3bx/
HTML
<div class="wrapper">
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
Javascript
document.querySelectorAll('.row').forEach((element, index) => {
element.style.order = index * 2;
});
document.querySelectorAll('.element').forEach(element => {
element.addEventListener('click', event => {
var newRow = document.createElement('div');
newRow.classList.add('row');
newRow.style.order = +event.currentTarget.parentNode.style.order + 1;
var newElement = document.createElement('div');
newElement.classList.add('element');
newRow.appendChild(newElement);
event.currentTarget.parentNode.parentNode.appendChild(newRow);
});
});
CSS
.element {
min-width: 100px;
height: 50px;
flex: 1;
border: 1px solid black;
flex-wrap: nowrap;
}
.row {
width: 350px;
display: flex;
flex-direction: row;
}
.wrapper {
display: flex;
flex-direction: column;
}

you can use javascript to solve this problem , like this ....
html code:
<div id="a">
<h3>wellcome</h3>
</div>
<div id="b">
<h3>hello...</h3>
</div>
javascript code in external file
function goB()
{
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="block";
}
function
{
document.getElementById("b").style.display="none";
document.getElementById("a").style.display="block";
}

Add a div and set its display to Hidden.
Get onclick event for a particular div and set the display property to block
window.addEventListener("load", function(){
document.getElementById("click").onclick = function(){
document.getElementById("div-1").style.display = "block";
};
});
.row
{
width:100%;
}
.one-third
{
width:33.33333%;
float:left;
padding:30px 0;
}
.full-width
{
display:none;
width:100%;
text-align:center;
}
<div class=wrap>
<div class="row">
<div id="click" class="one-third">
Column 1-Click Me
</div>
<div class="one-third">
Column 2
</div>
<div class="one-third">
Column 3
</div>
</div>
<div class="full-width" id="div-1">Full width Div</div>
<div class="row">
<div class="one-third">
Column 1
</div>
<div class="one-third">
Column 2
</div>
<div class="one-third">
Column 3
</div>
</div>

Angular JS displaying a specific ng-grid in a ng-repeat

Friends, i have a tree that is dynamically created from JSON. It also creates the grids that i want for a particular element on the tree and hides them all. Then i have a ng-click that shows it. My problem is that it shows ALL of them instead of the one that i want. For example, if user clicks on the header in 'Record 1' it should display the first grid and so on and so on. Here is my JSBin.
My HTML looks like this. Please see my JSBin for JavaScript file:
<body ng-controller="AbnTestController" style="margin:20px">
<button ng-click="try_changing_the_tree_data()" class="btn btn-default btn-sm">Submit File</button>
<p>
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<tr>
<!-- ============ LEFT COLUMN (TREE) ============== -->
<td width="250px" style="vertical-align:top" bgcolor="whitesmoke">
<div style="width:250px;background:whitesmoke;border:1px solid lightgray;border-radius:5px;">
<abn-tree ng-click="visible.grid = true" tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2"></abn-tree>
</div>
</td>
<!-- ============ RIGHT COLUMN (CONTENT) ============== -->
<td width="80%" valign="top" bgcolor="#d2d8c7">
<div style="vertical-align:top;">
<div ng-repeat="rule in rules">
<div ng-show="visible.grid == true" class="gridStyle" ng-grid="rule.grid" ></div>
</div>
<div id="results"></div>
</div>
</td>
</tr>
</table>
</p>
</body>

Here's a jsbin
HTML (diff):
<div ng-repeat="rule in rules">
<div
ng-show="rulesMap[rule.uid] == 'isVisible'"
class="gridStyle"
ng-grid="rule.grid"></div>
</div>
JavaScript remove calls to createGrids and:
$scope.my_tree_handler = function(branch) {
createGridsFromBranch(branch);
};
/*Function that builds the grid*/
$scope.rulesMap = {};
$scope.rules = [];
createGridsFromBranch = function(branch) {
var gridUid = 'g_'+branch.uid;
for(var i in $scope.rulesMap) {
$scope.rulesMap[i] = 'notVisible';
}
if($scope.rulesMap[gridUid]) {
$scope.rulesMap[gridUid] = 'isVisible';
return;
}
$scope.rulesMap[gridUid] = 'isVisible';
$scope.rules.push({
uid: gridUid,
grid: {
...
}
});

Close a bootstrap row and start new row after every nth containing div

I have a bootstrap row which will be populated by, let's say, blog post thumbnails.
<section class="container">
<div class="row thumbs">
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
</div>
<hr class="divider" />
<div class="navigation">navigation</div>
</section
I want to close a row, insert hr tag and open a new bootstrap row after every 4th post thumbnail.
<section class="container">
<div class="row thumbs">
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
</div>
<hr class="divider" />
<div class="row">
<div class="col-sm-3">content</div>
</div>
<hr class="divider" />
<div class="navigation">navigation</div>
</section>
Is there a way to do this with jquery?

Can do something like this:
var $mainElem = $('.row'),/* adjust selector to suit page*/
$parent = $mainElem.parent(),
/* remove children after 4th from existing row */
$items = $mainElem.children(':gt(3)').detach();
if ($items.length) {
/* create new row for every 4 items removed above */
for (var i = 0; i < $items.length; i = i + 4) {
var $row = $('<div class="row">').append($items.slice(i, i + 4));
$parent.append('<hr class="divider">').append($row);
}
}
DEMO

This worked best for me:
var $d = $('.thumbs');
var $p = $('.col-sm-3:gt(3)', $d);
if ($p.length) {
$('<div class="row thumbs">').insertAfter($d).append($p);
$('<hr class="divider">').insertAfter($d);
}

Depending on your motivation to wrap each set of columns in a new row, you can style every nth row with straight CSS.
In bootstrap, if you have extra columns that spillover past 12, they just wrap into a new line anyway, so having the new row is usually redundant, although you might have some external reason to keep it in your case.
Either way, here's a CSS solution that adds a page wide horizontal divider every 4 divs:
Demo in jsFiddle & Stack Snippets
.container .row.thumbs div:nth-child(4n) {
position: static;
}
.container .row.thumbs div:nth-child(4n):after {
content: ' ';
border-top: 1px solid black;
display: block;
position: absolute;
width: 95%;
margin-left: 2.5%;
left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<section class="container">
<div class="row thumbs">
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
</div>
<div class="navigation">navigation</div>
</section>
Also, bear in mind that this won't be natively supported in < IE8

Display image as none on drop event

So I have 2 columns filled with images. I want to drag an image from the left column and drop it on the right column's image. The original image on the left must then have it's display set to none so that it disappears.
Here is an example of the html:
<div id="container1">
<table class="table1">
<tr>
<td>
<div class="info1" id="info1" ondragover="allowDrop(event)" ondrop="drop(event)">
<div style="float:left">
<img class="myimg" style="max-height:80px;" src="Pictures/Smiley.png">
</div>
<div style="float:left;">
<p class="myname">Name: Jane Doe</p>
<p class="myprof">Profession: Carpenter</p>
</div>
</div>
</td>
</tr>
</table>
</div>
<div id="container2">
<table class="table2">
<tr>
<td>
<div class="info2" onmousedown = "returnDrop(this.querySelector('img').src)" ondragover="allowDrop(event)" ondrop="drop()" >
<div style="float:left">
<img class="myimg2" style="max-height:80px;" src="Pictures/QuestionMark.png">
</div>
<div style="float:left;">
<p class="myname2">Name: Unspecified</p>
<p class="myprof2">Profession: Unspecified</p>
</div>
</div>
</td>
</tr>
</table>
</div
Here is some of the Javascript I've tried - it's probably best not to look as it as it simply doesn't work. I can use jquery if it's necessary.
document.getElementsByClassName('info2')[0].drop = function() {
document.getElementsByClassName('myimg2')[0].src = storeOnClick;
document.getElementsByClassName('myname2')[0].innerHTML=name;
document.getElementsByClassName('myprof2')[0].innerHTML=prof;
updateRecord();
return;
}
function updateRecord(div){
div.parentNode.parentNode.parentNode.style.display='none';
}
function returnDrop(el){
if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/QuestionMark.png"){
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley.png"){
updateRecord1(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley2.png"){
updateRecord2(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley3.png"){
updateRecord3(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley4.png"){
updateRecord4(el);
}
else if(el=="file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley5.png"){
updateRecord5(el);
}
}
function allowDrop(ev) {
ev.preventDefault();
}
Necessary but unrelated to the issue:
function start(){
first();
}
function first () {
var _divs = document.querySelectorAll('.info1');
for (var i = 0; i < _divs.length; i++) {
_divs[i].addEventListener("mousedown", function () { changeInfo1(this) }, false);
}
}
function changeInfo1(el) {
myimg = el.querySelector('.myimg'),
myname = el.querySelector('.myname'),
myprof = el.querySelector('.myprof')
// img
storeOnClick = myimg.src;
// name
name = myname.innerHTML;
// profession
prof = myprof.innerHTML;
}

You could very simply add the following for each of your images: (note the last line)
document.getElementsByClassName('info2')[0].drop = function() {
document.getElementsByClassName('myimg2')[0].src = storeOnClick;
document.getElementsByClassName('myname2')[0].innerHTML=name;
document.getElementsByClassName('myprof2')[0].innerHTML=prof;
if(storeOnClick=='file:///C:/Users/nmonk/Desktop/Tree/Pictures/Smiley.png'){
document.getElementsByClassName('info1')[0].parentNode.style.display='none';
}