CODEWITHSUNDEEP
javascripthtml
Hec46
Hec46

Reputation: 191

How to show divs progressively with one function?

I have an html page with three div and one button. div2 and div3 are hidden, and div1 is shown from the beginning. What I want to do is that, when you press the button, div 2 appears below div 1, and then you press the button again, div 3 appears below div 1 and 2. What I have at the moment is this:

<div id="div1" style="display:block;">
   Some stuff...
</div>

<div id="div2" style="display:none;">
   Some stuff...
</div>

<div id="div3" style="display:none;">
   Some stuff...
</div>

<a><img id="button" src="img/button.png" onclick="myFunc()" /></a>

And the javascript:

function myFunc() {
    var d2 = document.getElementById("div2");
    var d3 = document.getElementById("div3");

    if ( d2.style.display == "none" ) {
        d2.style.display = "block";
    }

    if ( d2.style.display == "block" ) {
        d3.style.display = "block";
    }
}

This is what I've got, but it displays div2 and div3 at the same time. Any idea on how to do it will be very much appreciated!

Upvotes: 1

Views: 931

Answers (6)

Palpatim
Palpatim

Reputation: 9272

Or, try a more object-oriented approach, and abstract the "visibility" into CSS classes rather than inline styles. More semantic and maintainable code, and easier to understand when rendered on the page.

(DEMO)

Revised HTML:

  <!-- First div is visible initially -->
  <div class="progressive visible">
    Some stuff...
  </div>

  <div class="progressive">
    Some stuff...
  </div>

  <div class="progressive">
    Some stuff...
  </div>

  <!-- An ID of 'button' isn't very descriptive -->
  <a><img id="displayNextButton" src="img/button.png" /></a>

New CSS:

.progressive {
  display: none;
}

.visible {
  display: block;
}

Revised JavaScript:

function ProgressiveDisplayer() {
  this.elements = document.getElementsByClassName('progressive');
  this.currentlyVisible = 0;
}

ProgressiveDisplayer.prototype.displayNext = function() {
  if (this.currentlyVisible < this.elements.length - 1) {
    this.currentlyVisible++;
    this.elements[this.currentlyVisible].className += ' visible';
  }
}

var progressiveDisplayer = new ProgressiveDisplayer();

var displayNextButton = document.getElementById('displayNextButton');

displayNextButton.addEventListener('click', function() { progressiveDisplayer.displayNext(); });

Upvotes: 0

frenchie
frenchie

Reputation: 51997

I would change the HTML and use classes, like this

<div id="div1" style="display:block;">
   Some stuff...
</div>

<div class="divMagic" id="div2" style="display:none;">
   Some stuff...
</div>

<div class="divMagic" id="div3" style="display:none;">
   Some stuff...
</div>

<a><img id="button" src="img/button.png" onclick="myFunc()" /></a>

That way, you can add more divs and it'll still work. And then for the jQuery code, something like this:

function myFunc() {

   $('body').find('.divMagic').filter(':hidden').eq(0).show();
}

I would recommend changing $('body') for the container of the divs.

Upvotes: 1

Aaronstran
Aaronstran

Reputation: 131

div1 is the div you press to expand div2. The content list under div 2 is of course what you will see once it is expanded.

The script shows once the document is loaded you will be able to click the div and it will slide up or down when you click. I haven't made anything to control the speed.

Jquery is required for this.

<div id="div1" style="cursor:pointer;">
EXPANDING COLLAPSING DIV
</div>
<div id="div2" style="display:none">
content<br />
content

</div>


<script type="text/javascript">
$(document).ready(function(){
$("#div1").click(function(){
    $("#div2").slideToggle();

});
});
</script>

Upvotes: 0

Fillip Peyton
Fillip Peyton

Reputation: 3657

If you're down to use a jquery plugin, I created a plugin for this very need: https://github.com/fillswitch/Jquery-Sequential-Animations

It lets you cycle over a jquery collection and animate each one sequentially, one after another.

Upvotes: 0

weirded
weirded

Reputation: 21

Either make that an if else instead of if if or better yet add a counter and the value of the counter gets appended to make the ID of the div e.g 'div' + counter

Upvotes: -1

gcr15
gcr15

Reputation: 117

You are going to need a counter variable

var count = 0;
function myFunc() {
  count += 1;
  var d2 = document.getElementById("div2"),
      d3 = document.getElementById("div3");

  if (count === 1) {
    if (d2.style.display == "none") {
      d2.style.display = "block";
    }
  }
  if (count === 2) {
    if (d3.style.display == "none") {
      d3.style.display = "block";
    }
  }
}

Upvotes: 1

Related Questions