CODEWITHSUNDEEP
javascriptmootoolsshow-hide
Andrew Richardson
Andrew Richardson

Reputation: 299

Hide FX.slide content at the start instead of after a click

I've got my mootools FX.slide working fine but I want the content to be hidden at the beginning instead of after they click on the link. I've done this with jquery and I usually just change the class to display:none; but it doesn't work the same with mootools.

How do I go about making the content hidden at first?

Here is a fiddle of what I've made:

http://jsfiddle.net/ajrdesign/seVM7/

Here's the code:

JS

var mySlide = new Fx.Slide('slider_content');

$('toggle').addEvent('click', function(e){
   mySlide.toggle();
});

HTML

<li>
    <h3>What can I do with Revu iPad?</h3>
    <a id="toggle" href="#">Answer</a>
    <div id="slider_content">
        <p>Revu iPad includes some of the most popular features of Bluebeam Revu, enabling you to redline PDFs and collaborate with others on the go. Access PDFs through Dropbox, Box,  iTunes, or WebDAV and redline PDFs with markup tools* including your existing tool sets. Additionally, collaborate with project partners across the globe in real time using Bluebeam Studio. </p>
        <p>Revu iPad does not include all the features of Bluebeam Revu. Our app is designed to provide users with the features they need to document issues and collaborate in the field, without compromising speed.</p>
        <p>*Measurement annotations are currently not supported.</p>
    </div>
</li>

CSS

#slider_content {
    padding: 10px;
    margin: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

Upvotes: 1

Views: 550

Answers (3)

arcadius
arcadius

Reputation: 429

  1. Add style="display:none" in HTML code to the element you're going to toggle();

  2. Create Fx.Slide with onComplete callback:

    var myFx = new Fx.Slide('slider_content', {
   onComplete: function() {
      if (this.wrapper.offsetHeight != 0)
         this.wrapper.setStyle('height', 'auto');
   }
});

  3. Run some code before expanding div for the first time:

    var e = $('slider_content');
if ( e.getStyle('display') != 'block' ) {
   myFx.hide();
   e.setStyle('display', 'block');
}

myFx.toggle();

Upvotes: 0

Захар Joe
Захар Joe

Reputation: 693

I was looking for the same (i.e. setting the default state to 'hidden') and actually the solution is pretty simple and has been described here:

Just add .hide() to your line like so:

var mySlide = new Fx.Slide('slider_content').hide();

Upvotes: 1

Andrew Richardson
Andrew Richardson

Reputation: 299

Found a fix for the problem!

http://jsfiddle.net/ajrdesign/seVM7/1/

Basically added a little domready event:

var mySlide = new Fx.Slide('slider_content');
document.addEvent("domready", function() { 
   $('slider_content').slide('hide'); 
   $('toggle').addEvent('click', function(e) { 
      e.stop(); 
      mySlide.toggle(); 
   }); 
});

Upvotes: 2

Related Questions