hide div, show another... then hide, show another on mouse click

Question

I'm trying to have a div hide and then show the next div when the image in the div is clicked. When it is clicked again, hide that div and load the next one, etc.

The below works, but realize it's not pretty. What's the better way to do this, and without using inline javascript?

I'm also trying to add a "next" button that will hide the div and show the next dive... so the user can load the next item without clicking the a href in the div.

Thanks!

function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}

Body...

<div id = "div1" style="display:block" onclick = "replace('div1','div2')"><a href="link1.html" target="_blank"><img src="images/a.jpg"></a></div>
<div id = "div2" style="display:none" onclick = "replace('div2','div3')"><a href="link2.html" target="_blank"><img src="images/b.jpg"></a></div>
<div id = "div3" style="display:none" onclick = "replace('div3','div4')"><a href="link3.html" target="_blank"><img src="images/c.jpg"></a></div>
<div id = "div3" style="display:none" onclick = "replace('div4','div5')"><a href="link4.html" target="_blank"><img src="images/.jpg"></a></div>
...

Answer 1

also, you can use two functions at the same time

<script>
function hideMeShowNext( element )
{
element.style.display = 'none'
element.nextSibling.style.display = 'block'
}
</script>

then render this anywhere in your page//you can change <A> to <Div>
<a href="" onclick="hideMeShowNext('first');hideMeShowNext('second');">Click Me</a>

if it doesnt work, then use

<script type="text/javascript">
function myfnction() {
hideMeShowNext('first');
hideMeShowNext('second');
}
</script>

<a href="" onclick="myfunction();"> blabla </a>

Answer 2

demo jsBin

But if you want the images to perform an 'advance' after a click, than why you have them wrapped inside an a element that is linkable to an other page using target="_blank" ?

In the meanwhile here is the simplified HTML:

<div id="gallery">  
  <a href="link1.html" target="_blank"><img src="img1.jpg"></a>
  <a href="link2.html" target="_blank"><img src="img2.jpg"></a>
  <a href="link3.html" target="_blank"><img src="img3.jpg"></a>
  <a href="link4.html" target="_blank"><img src="img4.jpg"></a>  
</div>

...and this couple of jQ/javascript lines:

var i = 0;                       // set desired starting one // zero based                         
var N = $('#gallery >*').length; // get number of childrens

function advance(){
    $('#gallery >*').hide().eq(i++%N).show();
}
advance();

$('#next').click( advance );

---

Using this script you can easily trigger the advance function clicking your images too, but than you have to prevent the anchor click behavior using inside the function return false :

jsBin demo with clickable images

var i = 0;                            
var N = $('#gallery >*').length;

function advance(){
  $('#gallery >*').hide().eq(i++%N).show();
  return false;   // remove that line to make the gallery advance but the same time go to the desired link-page
}
advance();

$('#next, #gallery >*').click( advance ); // comma separate the elements that will trigger the function

---

If you want a more 'fancy' effect here you go:

jsBin demo with fade effect

The code:

var i = 0;                            
var N = $('#gallery >*').length;

$('#gallery >*').hide().eq(i++%N).show(); // the initial adjustment (on DOM ready)

function advance(){
  $('#gallery >*').stop().fadeTo(900,0).eq(i++%N).stop().fadeTo(900,1);
}

$('#next, #gallery >*').click( advance );    // trigger the fade advance/effect function

Answer 3

I'd suggest, given that jQuery appears to be an option:

$('div').not(':first').hide();
$('div a').click(
    function(e){
        e.preventDefault();
        var that = $(this).closest('div'),
            duration = 1200;
        if (that.next('div').length){
            that.fadeOut(duration,
                         function(){
                             that.next('div').fadeIn(duration);
                         });
        }
    });​​​​​​​​​​​

JS Fiddle demo.

---

Edited in response to comment from OP, below:

Anyway to do this so when you click the image the a href target=_blank works?

Sort of, yes. But assuming that all you want is for a new window to open up in response to clicking the a (and to open that window to the href from that a), then simply use window.open():

$('div').not(':first').hide();
$('div a').click(
    function(e){
        e.preventDefault();
        var newWin = window.open(this.href,'newWindow'),
            that = $(this).closest('div'),
            duration = 1200;
        if (that.next('div').length){
            that.fadeOut(duration,
                         function(){
                             that.next('div').fadeIn(duration);
                         });
        }
    });​

JS Fiddle demo.

---

Edited to improve the script a little, as per Roko's comment that a 'loop would be nice' (which I misunderstood initially, but now assume that he meant to move from the last image to the first, rather than simply failing/stopping):

$('div').not(':first').hide();
$('div a').click(
    function(e){
        e.preventDefault();        
        var newWin = window.open(this.href,'newWin'),
            that = $(this).closest('div'),
            duration = 1200;
        if (that.next('div').length){
            that.fadeOut(duration,
                         function(){
                             that.next('div').fadeIn(duration);
                         });
        }
        else {
            that.fadeOut(duration,
                         function(){
                             that.prevAll('div:last').fadeIn(duration);
                         });
        }
    });​

JS Fiddle demo.

References:

• fadeIn().
• fadeOut.
• :first selector.
• hide().
• :last selector.
• next().
• not().
• prevAll().
• window.open().

Answer 4

Do you somehow expect the links to work, and then on the new page show the selected image?

If not :

var elems = $('div[id^="div"]');
elems.not(':first').hide();

elems.on('click', function(e) {
    e.preventDefault();
    elems.hide();
    $(this).next().show();
});

HTML

<div id="div1"><a href="link1.html" target="_blank"><img src="images/a.jpg"></a></div>
<div id="div2"><a href="link2.html" target="_blank"><img src="images/b.jpg"></a></div>
<div id="div3"><a href="link3.html" target="_blank"><img src="images/c.jpg"></a></div>
<div id="div4"><a href="link4.html" target="_blank"><img src="images/.jpg"></a></div>​​​​​​​​​​​​​​​​​​​​

Answer 5

give all your divs an onclick="hideMeShowNext(this)"

and define the function

<script>

function hideMeShowNext( element )
{

element.style.display = 'none'
element.nextSibling.style.display = 'block'

}

</script>