Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript show/hide Reply To: show/hide

#240821
Shikkediel
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;

Demo