Home › Forums › JavaScript › show/hide › Reply To: show/hide
April 22, 2016 at 9:24 am
#240821
Participant
I’ve added two divs – with most of the content from there :
<div id="MOBILE_FEED">
<div id="MOBILE_FEED_INNER" class="smallertext">
<div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left">Mobile Feed by Edo</td>
<td align="right"><a href="javascript:mobile_feed_close()">close</a></td>
</tr>
</tbody>
</table>
<div id="MOBILE_FEED_INNER_IMG"><img src="//www.anony.ws/i/2016/04/22/somename.jpg"></div>
<br>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="200" align="left">Some text</td>
<td width="124" align="right"><a target="_blank" href="/">location</a>
<a style="margin-left:3px" href="javascript:mobile_feed_next()">next</a></td>
</tr>
</tbody>
</table>
</div>
<div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left">Mobile Feed by Edo</td>
<td align="right"><a href="javascript:mobile_feed_close()">close</a></td>
</tr>
</tbody>
</table>
<div id="MOBILE_FEED_INNER_IMG"><img src="//www.anony.ws/i/2016/04/22/whatever.jpg"></div>
<br>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="200" align="left">Some text</td>
<td width="124" align="right"><a target="_blank" href="/">location</a>
<a style="margin-left:3px" href="javascript:mobile_feed_next()">next</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Small bit of style :
#MOBILE_FEED_INNER > div:not(:first-of-type) {
display: none;
}
And a new function that will show these divs consecutively :
var count = 0;
function mobile_feed_next() {
$('#MOBILE_FEED_INNER > div').eq(count).hide();
count++;
count = count%2;
$('#MOBILE_FEED_INNER > div').eq(count).show();
}
Just make sure to adapt this number to the amount of divs present, then it will loop :
count = count%2;