We Keep Coding

How to use 'this' in a javascript function in a php foreach and to make it work separately?

I would like to trigger the appearance of a text after pressing a button for each user individually,The objective is that if you press the button of a specific user, the text will appear only for this one and not for the others. Unfortunately my code does not work. When I click on the button the text appears for all users. How can I do it?
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="card-body">
<div style="padding-top: 90px; padding-left: 30px;">
<div class="user_style2">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>install_id</p>
<p>branch_id</p>
</div>
<button onclick="hiddenButton(this)">Try it</button>
<div class="DIV" name="DIV">
This is my DIV element.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
// End the foreach loop
?>
<script>
function hiddenButton(this) {
var x = document.getElementsByClassName("DIV");
for (i = 0; i < x.length; i++)
if (x[i].style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
</script>
</body>

This is fairly straightforward - assign a single delegated event handler to a common ancestor ( here simply the document itself ) and use the event and specifically the event.target to identify which button invoked the click event. From that you can query the DOM using querySelector ( or by other means if required such as sibling selectors )
The question title refers to using this within your function but you have that supplied as the argument where one might expect event - and you should be able to access the target property in the same manner as in the code here.
document.addEventListener('click',e=>{
if( e.target.tagName=='BUTTON' ){
let div=e.target.parentNode.querySelector('div.DIV');
div.style.display=div.style.display=='block' ? 'none' : 'block'
}
})
.DIV{
display:none
}
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="card-body">
<div style="padding-top: 90px; padding-left: 30px;">
<div class="user_style2">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>install_id</p>
<p>branch_id</p>
</div>
<button>Try it</button>
<div class="DIV" name="DIV">
This is my DIV element.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="card-body">
<div style="padding-top: 90px; padding-left: 30px;">
<div class="user_style2">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>install_id</p>
<p>branch_id</p>
</div>
<button>Try it</button>
<div class="DIV" name="DIV">
This is my DIV element.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="card-body">
<div style="padding-top: 90px; padding-left: 30px;">
<div class="user_style2">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>install_id</p>
<p>branch_id</p>
</div>
<button>Try it</button>
<div class="DIV" name="DIV">
This is my DIV element.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The meaning of this varies depending upon how it is used but using it like this function hiddenButton(this){} is not correct. Consider these simple examples of referring to this within a function / event handler.
document.getElementById('apple').addEventListener('click',function(e){
console.info(`
function(e){} /* conventional */
this:%s
this.id:%s
e.target:%s
e.target.id:%s`,
this,
this.id,
e.target,
e.target.id
);
});
document.getElementById('banana').addEventListener('click',e=>{
console.info(`
(e)={}/* arrow */
this:%s
this.id:%s
e.target:%s
e.target.id:%s`,
this,
this.id,
e.target,
e.target.id
);
});
function hiddenButton(that){
console.info(`
function(this){} /* inline */
this:%s
that:%s
this.id:%s
that.id:%s`,
this,
that,
this.id,
that.id
);
}
.fruit div{
padding:0.5rem;
width:100px;
margin:0.5rem;
display:inline-block;
text-align:center;
border:2px solid black;
border-radius:0.5rem;
}
.fruit div:after{
content:attr(id)
}
#apple{
background:green;
color:white;
}
#banana{
background:yellow
}
#plum{
background:purple;
color:white;
}
<div class='fruit'>
<div id='apple'></div>
<div id='banana'></div>
<div id='plum' onclick='hiddenButton(this)'></div>
</div>

Isotope JS Packery Tile Gaps

I’m using the Packery layout mode in Isotope JS. I was using Masonry, but I found I was getting more desirable results using this mode instead, but I’m totally open to other options. I’m also using it integrated with the Bootstrap responsive grid as described here. Everything is working great with the exception of one thing.
I have a single-wide tile, then a double-wide tile, followed by several single-wide tiles. Everything looks great in the Bootstrap 4 and 3 column configurations. As soon as I collapse it to the 2 column configuration, I only have 1 single-wide tile up top in the first position. The double-wide is below, and all the single wide tiles show up side-by-side (2 per row) all the way down, as desired. There is even 1 tile left over at the bottom by itself, that if rearranged, each single-wide tile would be paired with another of the same type.
Here are some quick grids of the 3 different column configurations for some visualization:
4-Columns: 3-Columns: 2-Columns:
+--+--+--+--+ +--+--+--+ +--+--+
|88|88888|88| |88|88888| |88| <---this empty tile right here...
|88|88|88|88| |88|88|88| |88888|
|88|88| | | |88|88|88| |88|88|
+--+--+--+--+ |88| | | |88|88|
+--+--+--+ |88|88|
|88<------...should be filled up by this
+--+--+ tile (or one before it)
Here's a repro:
$('.grid').isotope({
packery: {
columnWidth: '.grid-sizer'
},
itemSelector: '.grid-item',
percentPosition: true,
});
.one {
background-color: red;
}
.two {
background-color: orange;
}
.three {
background-color: yellow;
}
.four {
background-color: green;
}
.five {
background-color: blue;
}
.six {
background-color: purple;
}
.seven {
background-color: red;
}
.eight {
background-color: orange;
}
.nine {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="grid">
<div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 one">
<div class="grid-item-content">ONE</div>
</div>
<div class="grid-item col-md-6 col-sm-8 col-xs-12 two">
<div class="grid-item-content">TWO</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 three">
<div class="grid-item-content">THREE</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 four">
<div class="grid-item-content">FOUR</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 five">
<div class="grid-item-content">FIVE</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 six">
<div class="grid-item-content">SIX</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 seven">
<div class="grid-item-content">SEVEN</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 eight">
<div class="grid-item-content">EIGHT</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 nine">
<div class="grid-item-content">NINE</div>
</div>
</div>
</div>
</div>
Any ideas? Thank you!

Solution below (credit to #Macsupport !):
$('.grid').packery({
itemSelector: '.grid-item',
});
.one {
background-color: red;
}
.two {
background-color: orange;
}
.three {
background-color: yellow;
}
.four {
background-color: green;
}
.five {
background-color: blue;
}
.six {
background-color: purple;
}
.seven {
background-color: red;
}
.eight {
background-color: orange;
}
.nine {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/packery#2/dist/packery.pkgd.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="grid">
<div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 one">
<div class="grid-item-content">ONE</div>
</div>
<div class="grid-item col-md-6 col-sm-8 col-xs-12 two">
<div class="grid-item-content">TWO</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 three">
<div class="grid-item-content">THREE</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 four">
<div class="grid-item-content">FOUR</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 five">
<div class="grid-item-content">FIVE</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 six">
<div class="grid-item-content">SIX</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 seven">
<div class="grid-item-content">SEVEN</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 eight">
<div class="grid-item-content">EIGHT</div>
</div>
<div class="grid-item col-md-3 col-sm-4 col-xs-6 nine">
<div class="grid-item-content">NINE</div>
</div>
</div>
</div>
</div>

Change Panel heading color based on click and show panel body content

I have a panel which is divided into 3 section.
When I click on other section then it's background color should change along with its text color and according to it, panel body content should get changed.
app.controller('three_panel_controller', function () {
$scope.switch_panel = false;
})
.clicked_section_background_color{
background: #2fabe9;
color:#ffffff;
}
.unclicked_section_background_color{
background: #f5f5f5;
color:#000000;
}
.padding_top_bottom_15{
padding-top:15px;
padding-bottom:15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="panel panel-default no_box_shadow no_border_radius" ng-app="" ng-controller="three_panel_controller">
<div class="panel-heading cursor_pointer no_box_shadow border_bottom_none text-center no_border_radius">
<div class="row ">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center clicked_section_background_color padding_top_bottom_15" ng-click="switch_panel = !switch_panel"
ng-class="{clicked_section_background_color : switch_panel, unclicked_section_background_color : !switch_panel}">
<span class="font_size_14">Compose</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15 unclicked_section_background_color" ng-click="switch_panel = !switch_panel"
ng-class="{unclicked_section_background_color : switch_panel , clicked_section_background_color : !switch_panel}">
<span class="font_size_14">Subject</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15">
<span class="font_size_14">Send</span>
</div>
</div>
</div>
<div class="panelbody">
<span>Show div on compose click</span>
</div>
<div class="panelbody">
<span>Show div on subject click</span>
</div>
<div class="panelbody">
<span>Show div on send click</span>
</div>
</div>
just like in the image
Any help would be great.
thank you.

You could track which one is selected in your scope variable switch_panel , by assigning an Id to every panel:
<div class="panel-heading cursor_pointer no_box_shadow border_bottom_none text-center no_border_radius">
<div class="row ">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center clicked_section_background_color padding_top_bottom_15" ng-click="switch_panel = '1'"
ng-class="{clicked_section_background_color : switch_panel == '1', unclicked_section_background_color : switch_panel !='1'}">
<span class="font_size_14">Compose</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15 unclicked_section_background_color" ng-click="switch_panel = '2'"
ng-class="{clicked_section_background_color : switch_panel == '2' , unclicked_section_background_color : switch_panel !='2'}">
<span class="font_size_14">Subject</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15">
<span class="font_size_14">Send</span>
</div>
</div>
</div>
Then for your second part:
<div class="panelbody" ng-if="switch_panel=='1'">
<span>Active panel 1</span>
</div>
<div class="panelbody" ng-if="switch_panel=='2'">
<span>Show div on subject click</span>
</div>
<div class="panelbody" ng-if="switch_panel=='3'">
<span>Show div on send click</span>
</div>
Working Sample: https://plnkr.co/edit/0eDZX467y22tDuW7wMef?p=preview

Try something like this:
//Controller
app.controller('three_panel_controller', function () {
$scope.switch_panel = false;
$scope.currentTab = 'first';
})
//View
<div class="panel panel-default no_box_shadow no_border_radius" ng-app="" ng-controller="three_panel_controller">
<div class="panel-heading cursor_pointer no_box_shadow border_bottom_none text-center no_border_radius">
<div class="row ">
ng-click changed --> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center clicked_section_background_color padding_top_bottom_15" ng-click="currentTab=first"
ng-class="{clicked_section_background_color : switch_panel, unclicked_section_background_color : !switch_panel}">
<span class="font_size_14">Compose</span>
</div>
ng-click changed --> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15 unclicked_section_background_color" ng-click="currentTab=second"
ng-class="{unclicked_section_background_color : switch_panel , clicked_section_background_color : !switch_panel}">
<span class="font_size_14">Subject</span>
</div>
ng-click changed --> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15" ng-click="currentTab=third">
<span class="font_size_14">Send</span>
</div>
</div>
</div>
<div class="panelbody" ng-if="currentTab=first"> <-- added ng-if
<span>Show div on compose click</span>
</div>
<div class="panelbody" ng-if="currentTab=second"> <-- added ng-if
<span>Show div on subject click</span>
</div>
<div class="panelbody" ng-if="currentTab=third"> <-- added ng-if
<span>Show div on send click</span>
</div>

Stack layout differently on mobile devices

I have been trying to stack three div's differently based on desktop, mobile and tablet with out having to duplicate the div's.
It should look like this
Is this possible with pure css?
A javascript answer will be fine if there is no way to do this with css alone.
Here is a fiddle
https://jsfiddle.net/DTcHh/19086/
<div class="row">
<div class="col-lg-2 col-sm-4 col-xs-12 sidebar-block">
<div class="block" style="background-color:red;"></div>
</div>
<div class="col-lg-6 col-sm-8 col-xs-12 ">
<div class="block" style="background-color:blue;"></div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-12">
<div class="block" style="background-color:yellow;"></div>
</div>
</div>
Thanks in advance!

If you think "mobile first", use col-*-push/col-*-pull classes like this..
<div class="row">
<div class="col-lg-6 col-lg-push-2 col-sm-8 col-sm-push-4 col-xs-12 ">
<div class="block" style="background-color:blue;"></div>
</div>
<div class="col-lg-2 col-lg-pull-6 col-sm-4 col-sm-pull-8 col-xs-12 sidebar-block">
<div class="block" style="background-color:red;"></div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-12">
<div class="block" style="background-color:yellow;"></div>
</div>
</div>
http://www.codeply.com/go/N8wCdrlkK3

How to create the following responsive layout with bootstrap?

I want to achieve these:
Computer view:
Tablet Portrait view:
Mobile Portrait view:
Currently I have this following code, where the "home-content" part will generate the items#1-items#X:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../_lib/normalize.css/normalize.css">
<link rel="stylesheet" href="index.css">
<script src="../_lib/jquery/jquery.min.js"></script>
<script src="../_lib/jquery/jquery.fittext.js"></script>
<script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<title></title>
</head>
<body>
<script>
init();
</script>
<div class="home-bg"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="home-noti">
<div class="news-noti">
<div class="news-panel panel">
<div class="news-title panel-heading">
<h2 class="panel-title">NEWSFLASH!</h2>
</div>
<div class="news-items-wrapper">
<ul id="news-items" class="news-items list-group"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div id="home-content" class="home-content"></div>
</div>
</div>
</div>
</body>
</html>
This piece of code can achieve the "Computer view" and "Tablet Portrait view". I could have done it in using 4 of "col-md-3" but that will mean sometimes I might get Notifications col with 2 items on the same row OR Notifications col with 1 item on the same row, which is not what I want. How do I achieve the "Mobile Portrait view" without breaking the layout of the previous 2?

You can use nested columns for this.
row
col-*-*
row
col-*-*
row
col-*-*
Review the Docs and view working example at Full Screen then reduce the viewport.
/**FOR DEMO PURPOSES ONLY**/
html,
body {
margin-top: 50px;
text-align: center;
}
.alert.alert-info {
height: 100px;
border-radius: 0;
}
.alert.alert-info-tall {
height: 340px;
border-radius: 0;
}
/**FOR DEMO PURPOSES ONLY**/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div class="alert alert-info alert-info-tall">Notifications</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-sm-4">
<div class="alert alert-info">1</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">2</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">3</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">4</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">5</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">6</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">7</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">8</div>
</div>
<div class="col-sm-4">
<div class="alert alert-info">9</div>
</div>
</div>
</div>
</div>
</div>

Try to figure out Bootstrap Gird Options and
you just Need to know when to use which class for which screen and you are good to go.
Here is the working structure for your reference.
<div class="row">
<div class="left-block col-lg-4 col-md-12 col-xs-12">
Aside Section
</div>
<div class="content-block col-lg-8 col-md-12 col-xs-12">
<div class="row" style="padding:10px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div>
</div>
</div>
</div>

Use this :
<div class="container">
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="col-xs-12 notification">
<p>Notifications</p>
</div>
</div>
<div class="col-md-9 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 1</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 2</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 3</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 4</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 5</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 6</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 7</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 8</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="col-xs-12 item">
<p>Item # 9</p>
</div>
</div>
</div>
</div>
</div>
And this style will help to get a better look :
.notification {
background-color:#000;
height:auto;
padding-top: 50px;
padding-bottom:50px;
margin-bottom:10px;
}
.item {
background-color:#333;
height: auto;
margin-bottom:10px;
}
p {
color:#ffffff;
}
Here is the fiddle : http://jsfiddle.net/xwmmfu0e/

You need to add an xs prefix. Try this adding col-xs-6 to both divs.
<div class="col-md-3 col-xs-6">
...
</div>
...
<div class="col-md-9 col-xs-6">
...
</div>