Develop Reference

Toggle that reveal text one at a time by click

I have a problem with my code. The goal is to have a text that appear when a user click on the link. But I want also that when he clicks on the link the only text that show is the text underneath and not in all the cells. Can someone has a clue on what I did wrong? I will probable add other links (more than 2) and I want to be sure that it will work every time.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$('.cat' + $(this).attr('data-prod-cat')).toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>

You have just to go up to the parent table using closest('table') function and then select all the text's related to the current clicked .toggler using .find('[class^="cat"]') like :
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
Hope this helps.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td>
<a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>

Based on your code, I guess you are trying to use data-prod-cat attribute to know which block needs to appear.
But in both of your block you have data-prod-cat="1" which means that you will activate both blocks on every action.
Try changing the 2nd block attribute to :
data-prod-cat="2"
You'll also need to update the css class in your other <tr>

You need to get the parent of <a> first then get that parent which is <tr>. Finally filter on cat1 class to toggle all siblings containing the cat1 class.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>

Align three boxes in css

I need to align the three boxes in a horizontal position. Also I need to add toggle color of the border of the second box. I am pasting my codes here.
My HTML code is
Unordered List
This is a simple list
First Item (bold)
Second Item
Third Item
Last Item (underlined)
<div class="box2">
<h2>Button Jquery Demo</h2>
<p>The background of this box should be set to white on document.ready()</p>
<p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
Toggle Color
</div>
<div class="box3">
<h2>Table Example</h2>
<p>Table rows should include a hover state</p>
<table>
<thead>
<div id="col3">
<table summary="" border="1" cellspacing="0" cellpadding="3">
<tr>
<th>Driver</th>
<th>Hometown</th>
<th>Car</th>
</tr>
</thead>
<tbody>
<tr>
<td>John S.</td>
<td>Lincoln, NE</td>
<td>55</td>
</tr>
<tr>
<td>Jane D.</td>
<td>Omaha, NE</td>
<td>24</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Mike J.</td>
<td>Albany, NY</td>
<td>1</td>
</tr>
</tfoot>
</table>
</div>
My CSS code is
.box1 {
background-color: #4b4244;
width: 300px;
padding: 25px;
margin: 25px;
height: 240px ;
border-radius: 25px;
display:inline-block;
}
.box2 {
margin: auto;
background-color:white;
width: 300px;
padding: 25px;
height: 240px;
border-radius: 25px;
display: inline-block;
}
.box3 {
position: absolute;
right: 0px;
background-color: #4b4244;
width: 300px;
padding: 25px;
margin: 25px;
height: 240px ;
border-radius: 25px;
display: inline-block;
}

Use float:left to align your boxes:
jsFiddle
EDIT:
I suspect the floating boxes are throwing your footer off. In that case, wrap your boxes in a containing tag (e.g. main) and give it this :after content:
main:after{
content:"";
display:block;
clear:both;
}
updated fiddle

try with this below code it may help you and look it into full screen
$(document).ready(function(){
$("a.toggleColor").click(function(){
$(".box2").toggleClass("border");
});
});
div.box1,.box2,.box3{
float : left;
height: 240px ;
width: 300px;
padding: 25px;
background-color: #4b4244;
margin : 25px;
border-radius: 25px;
}
.box2 {
background-color:white !important;
border : 1px #4b4244 solid;
}
.border{
border : 1px red solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box1">
<h2>Unordered List</h2>
<p>This is a simple list</p>
<ul>
<li>First Item (bold)</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Last Item (underlined)</li>
</ul>
</div>
<div class="box2">
<h2>Button Jquery Demo</h2>
<p>The background of this box should be set to white on document.ready()</p>
<p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
Toggle Color
</div>
<div class="box3">
<h2>Table Example</h2>
<p>Table rows should include a hover state</p>
<div id="col3" >
<table summary="" border="1" cellspacing="0" cellpadding="3">
<thead>
<tr>
<th>Driver</th>
<th>Hometown</th>
<th>Car</th>
</tr>
</thead>
<tbody>
<tr>
<td>John S.</td>
<td>Lincoln, NE</td>
<td>55</td>
</tr>
<tr>
<td>Jane D.</td>
<td>Omaha, NE</td>
<td>24</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Mike J.</td>
<td>Albany, NY</td>
<td>1</td>
</tr>
</tfoot>
</table>
</div>

How to get css or java class for specific part of code

Here's my code:
<div id="togglemenu2" class="sidetogglemenu">
<table class="hoverTable">
<tbody>
<tr>
<td colspan="2"> Example </td>
</tr>
<tr>
<td colspan="2">
<img class="gpablogo" src="http://s2.postimg.org/yb2yzb5fd/gpab.png">
<div class="gpab1">
<p>1</p>
</div>
<div class="gpab2">
<p>2</p>
</div>
<div class="gpab3">
<p>3</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
How can I move numbers 1,2,3 between G and P and Ab? I need a CSS code to move those numbers look like this:
G1 P2 AB3
Thanks in advance

Here is one way of realizing your layout. Create a wrapping element .logowrap around the image and the labels, and specify position: relative.
You can then use absolute positioning to place the labels where you need them.
.logowrap {
display: inline-block;
border: 1px dotted blue;
position: relative;
}
.logowrap img {
vertical-align: top;
}
.logowrap .gpab {
display: inline-block;
position: absolute;
top: 50%;
font-size: 2.00em;
}
.gpab.n1 {
left: 25%;
}
.gpab.n2 {
left: 50%;
}
.gpab.n3 {
left: 90%;
}
<div id="togglemenu2" class="sidetogglemenu">
<table class="hoverTable">
<tbody>
<tr>
<td>Example</td>
</tr>
<tr>
<td>
<div class="logowrap">
<img class="gpablogo" src="http://s2.postimg.org/yb2yzb5fd/gpab.png">
<div class="gpab n1">1</div>
<div class="gpab n2">2</div>
<div class="gpab n3">3</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

element inside td is not taking td full height if table height is auto

inside td I am taking a table, but somehow table is not taking the td full height. can any one help me to fix this issue.
html for table:
<table style="height: auto">
<tr>
<td style="background-color: red">
<table style="background-color: orange">
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>

You can't force an object to take up 100% of the height of a cell without writing some JavaScript that will figure out the height of the cell and resize the table programatically.
I'm not really sure what your goal is with this, but you can achieve the look you seem to want by setting the background on the td and set a border to get the red outline.
<table style="height: auto">
<tr>
<td style="background-color: orange; border: solid red 1px">
<table>
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>

Close DIV popup

we are showing a centered popup when a user clicks on a logo in a table.
Everything works except ...
logos in the center of the screen(under where the popup is/will be) are not working, and
we need a close button on each the popup.
This is what we have so far:
<style type="text/css">
.main55{
position: fixed;
TOP:50%;
LEFT:50%;
width:400px;
height: 400px;
margin-top:-200px;
margin-left:-200px;
}
.menu0{ clear:both;
}
.menu0 div{
cursor:pointer;
}
#main0 div{
display: none;
}
#main0 div.block{
display: block;
}
</style>
<script>
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("div");
var mli=document.getElementById("main"+m).getElementsByTagName("div");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
</script>
<!-----------------------table with LOGOS as menu items------------------------->
<div class="menu0" id="menu0">
<table border=0 bordercolor=red width=900>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,1)">
LOGO1
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,2)">
LOGO2
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,3)">
LOGO3
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,4)">
LOGO4
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,5)">
LOGO5
</div>
</td>
</table>
</div>
<!-----------------DIVS WITH INFO TO POPUP--------------------->
<div class="main55" id="main0">
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO1
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO2
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO3
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO4
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO5
</td>
</table>
</div>
</DIV>

you html is ver complex try this may be this is what you want?
<p>May be you want this? here</p>
<div id="light" class="white_content">This is the popup content. Close</div>
<div id="fade" class="black_overlay"></div>
JS
function showpopup () {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function hidepopup () {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
CSS For Centered ligthbox
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
background-color: white;
z-index:1002;
overflow: auto;
}
n CSS for black overlay for light box effects
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
jsbin