Javascript check if event handler has been clicked

Question 1

You need to Itrate over each para and check if the previous para is displayed;if displayed set as display none for the previous and for display block as for current one and return.

here is the sample code

<html>
<style type="text/css">
p {
    border:1px solid black;
    width:100px;
    height:30px;
    display:none;
}
</style>

<p style="display:block">some text1</p>
<p>some text2</p>
<p>some text3</p>
<p>some text4</p>
<p>some text5</p>
<input type="button" value = "left"  />
<input type="button" value = "right" 
onclick = "navigate()" 
id = "right"/>
<script>
function navigate(){
var p = document.getElementsByTagName('p');
for(var i = 1; i <p.length; i++){ 
 if(  p[i-1].style.display == 'block')
  {
    p[i].style.display = 'block' ;
    p[i-1].style.display ='none';
    return;
  }
}
}
</script>
</html>

Question 2

Check out the Content Swapper jQuery plug-in which does exactly what you're trying to do.

Or if you must do it your way, here's your code modified to work:

<!doctype html>
<html>
<head>

<style type="text/css">
p {
    border:1px solid black;
    width:100px;
    height:30px;
    display:none;
}
</style>

<script>
var i=0, paras = document.getElementsByTagName('p');

function hideAllPara() {
    for(var j=0; j<paras.length; j++) {
        paras[j].style.display = 'none'; 
    }
}
</script>

</head>

<body>

<p>some text1</p>
<p>some text2</p>
<p>some text3</p>
<p>some text4</p>
<p>some text5</p>
<input type="button" value = "left"  />
<input type="button" value = "right" onclick = "hideAllPara(); paras[i].style.display = 'block'; i = (i < paras.length-1) ? i+1 : 0;" id = "right"/>

</body>
</html>

You must note though, working with inline click events or JavaScript is never recommended.

Anyway, so basically each time you click the right button, first we need to hide all paragraphs, then display only the one required; to do that we need to keep track of the index/pointer and reset it once we've reached the end.

And if you wish to show a paragraph when the page load, you could do any of the following in CSS:

p:first-child {display: block;}
p:nth-child() /* specify whatever index you wish to show off all the selected paragraphs on the page */
Give a class name called "active" to the paragraph you wish to show and declare it in CSS as so; p.active {display: block;}

Question 3

What about:

var left=document.getElementById("left");
var right=document.getElementById("right");

var show=function(){
    var paragraphs=document.getElementsByTagName("p");
    var current=0;
    var len=paragraphs.length;
    return function(event){
        var button=event.target.id;
        var direction=0;
        var visi="visible";
        if(button==="left"){
            visi="hidden";
            direction=(current>0)?-1:0;
        } else {
            direction=(current<len-1)?1:0;
        }
        paragraphs[current].style.visibility=visi;
        current+=direction;
    };
}();

left.addEventListener("click", show);
right.addEventListener("click", show);

jsFiddle