<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
@media screen and (min-width:500px)
{
.col-xs-4
{
text-align:center;
}
}
@media screen and (min-width:700px)
{
.col-xs-4
{
text-align:center;
width:100%;
}
}
.col-xs-4{
text-align:center;
}
div .col-xs-4:hover{
}
.btn-primary{
width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div id="">
<div class="col-xs-4" style="background-color:lavender;"><button type="submit"; data-toggle="collapse"; data-target="#doctorVisit"; class="btn btn-primary">Doctor Visit</button></div>
<div id="doctorVisit" class="collapse">
<table class="table"; width:500px; height:300px; >
<thead>
<tr>
<th>Sr. No.</th>
<th>Visited with</th>
<th>Time</th>
<th>edit</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670d080f0927021f060a170b024904080a">[email protected]</a></td>
<td>Doe</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4825293a31082d30292538242d662b2725">[email protected]</a></td>
<td>Doe</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89e3fce5f0c9ecf1e8e4f9e5eca7eae6e4">[email protected]</a></td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-4" style="background-color:lavender;"><button type="submit"; id="pharmacyVisitBtn" data-toggle="collapse"; data-target="#pharmacyVisit"; class="btn btn-primary">Pharmacy Visit</button></div>
<div id="pharmacyVisit" class="collapse">
<table class="table"; width:500px; height:300px; >
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>edit</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91fbfef9ffd1f4e9f0fce1fdf4bff2fefc">[email protected]</a></td>
<td>Doe</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670a06151e27021f060a170b024904080a">[email protected]</a></td>
<td>Doe</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e68c938a9fa6839e878b968a83c885898b">[email protected]</a></td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-4" style="background-color:lavender;"><button type="submit"; data-toggle="collapse"; data-target="#stockistVisit"; class="btn btn-primary">Stockist Visit</button></div>
<div id="stockistVisit" class="collapse">
<table class="table"; width:500px; height:300px; >
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>edit</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e141116103e1b061f130e121b501d1113">[email protected]</a></td>
<td>Doe</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b4b8aba099bca1b8b4a9b5bcf7bab6b4">[email protected]</a></td>
<td>Doe</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="79130c1500391c01181409151c571a1614">[email protected]</a></td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
function show()
{
alert ("hey");
}
</script>
</body>
</html>
Ensure you run the above code using a server for proper functionality.
Explanation: I am looking to modify the 'data-target' attribute to target the div with the ID #stockistVisit when the screen size is small. Can this be achieved using CSS?
If not possible with CSS, is it feasible to achieve this using JavaScript?
I am also utilizing AngularJS. Is there a way to accomplish this using that framework as well?