Question

I have some Javascript/PHP code that brings in a RSS feed in a kind of loop so I can write some code at the start and end of it. (But I guess the text I write at the start and end will probably need to be the same each time.)

So what I really need is some javascript to hide all the other li’s except the first, and only display them when the next/previous buttons are clicked. I would prefer to not use jquery as its going to be a mini 1 page app (But will accept if needs must!)

<img src="previous.jpg" onClick="javascript_to_go_to_previous_li">
<ul>
<li id="sameidasrest">Post 1</li>
<li id="sameidasrest">Post 2</li>
<li id="sameidasrest">Post 3</li>
<li id="sameidasrest">Post 4</li>
</ul>
<img src="next.jpg" onClick="javascript_to_go_to_next_li">

Any way of doing that?

Answer 1

First thing first, you should really use an identifier for your <ul> element. Then, you can’t use the same ID for all your <li> elements. Every element has to have its own ID or, even better, you can use a combination of HTML + CSS + JavaScript to reach your goal.

HTML:
<ul id="myList" class="collapsed">
  <li>Post 1</li>
  <li>Post 2</li>
  <li>Post 3</li>
  <li>Post 4</li>
</ul>
<button id="btnTest">Click Me</button>

CSS:
ul.collapsed li:first-child {
  display:block;
}

ul.collapsed li {
  display:none;
}

JS:
document.getElementById('btnTest').addEventListener('click', function(){
  var list = document.getElementById('myList'),
      classes = list.className;
  if ( /collapsed/.test( classes ) ) {
    list.className = classes.replace( 'collapsed', '' );
  } else {
    list.className = classes + ' collapsed';
  }
});

You can test it at http://jsfiddle.net/ragnarokkr/ZafdC/

In this example I define the list and a button. The button works like a switch. Every time you click it, the list shows and hides the elements. All simply adding and removing a CSS class from the <ul> element.

Alternatively, you can use some framework such as jQuery, and in this case you can change the JS above in:

$('#btnTest').on('click', function(){
  $('#myList').toggleClass('collapsed');
});

The code to test it at http://jsfiddle.net/ragnarokkr/cUYPq/

---

This example is to interactively show/hide single list items using HTML+CSS and bare JavaScript:

HTML:
<ul id="myList">
  <li class="show">Post 1</li>
  <li class="hide">Post 2</li>
  <li class="hide">Post 3</li>
  <li class="hide">Post 4</li>
</ul>

<button id="btnShowOne">Show Item</button>
<button id="btnHideOne">Hide Item</button>

CSS:
.hide {
  display: none;
}

.show {
  display: block;
}

JS:
function iterateAndToggleClass( elements, classNameFind, classNameReplace, isTopDown ) {
  if ( isTopDown ) {
    for ( var i = 0; i < elements.length; i++ ) {
      var element = elements[i];
      if ( element.className === classNameFind ) {
        element.className = classNameReplace;
        return;
      }
    }
  } else {
    for ( var i = elements.length - 1; i >= 0; i-- ) {
      var element = elements[i];
      if ( element.className === classNameFind ) {
        element.className = classNameReplace;
        return;
      }
    }
  }
}

document.getElementById('btnShowOne').addEventListener('click', function(evt){
  evt.preventDefault();
  evt.stopPropagation();

  var list = document.getElementById('myList'),
      items = list.getElementsByTagName('li');

  iterateAndToggleClass( items, 'hide', 'show', true );
});

document.getElementById('btnHideOne').addEventListener('click', function(evt){
  evt.preventDefault();
  evt.stopPropagation();

  var list = document.getElementById('myList'),
      items = list.getElementsByTagName('li');

  iterateAndToggleClass( items, 'show', 'hide', false );
});

Of course this is not optimized code, but I hope it’s clear enough. You can test it at http://jsfiddle.net/ragnarokkr/swGEY/