...

View Full Version : Using Mootools "FxSlide" to show and hide text. But...



SaturdaysKids
11-02-2011, 12:14 AM
This should be a simple fix.. I hope.

JS:

//-- This is a really awful script and if it could be re-written by someone who knows what they're doing that would be incredible.


window.addEvent('domready', function() { //new event wooooo
// -- vertical2
var myVerticalSlide = new Fx.Slide('vertical_slide'); //declaring the variable with the FXSlide property

var toggleThis = $('v_toggle'); //toggle variable

myVerticalSlide.hide(); //hides the variable off the bat.

toggleThis.addEvent('click', function(event){ // uses the type 'click' the id on the link, giving it the following function
event.stop(); //Prevents browser from following the link and instead initiates the next line
myVerticalSlide.toggle(); //Togles the div declared in the variable VerticalSlide
});
});


HTML:

<div>
<a id="v_toggle" href="#">Question 1</a>
<div id="vertical_slide">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

<div>
<a id="v_toggle" href="#">Question 2</a>
<div id="vertical_slide">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>


I'm new to JS (and any programming language, i just know HTML, CSS/SASS) . I tried to make the code as stupid-simple as I could, as you can see with all the comments.

The problem is when you click on question1, all the answers show. I just want the answer below the question to show.

How can I write this to just show one answer at a time. Any explanation would be a huge help or a point in the right direction would be great help. I'd love to learn how to fix this as opposed to just copying pasting :\

SaturdaysKids
11-02-2011, 12:58 AM
My friend helped me and changed the JS to the following, but I still cant get it to work:

JS:


$$('.toggle').each(function(link){ //the $$.toggle gives you an array of links that have the css class toggle, then passing function(link){...} to each, youre doing that function to each of the links
link.addEvent('click', function(event){ //on click you add an event and that event is the
event.stop(); //stop event, where you prevent the user from following through to the next page
var divToHide = link.get('target'); //get the id for the div to toggle from the link's target
divToHide = new Fx.Slide(); //adding the slide script, dunno if this works or not
divToHide.hide(); //hiding the target initially
$divToHide.toggle('toggle'); //use $ to get the element with the id that matches target and slide it in or out
});
});


HTML:


<div>
<a href="#" target="div1" class="toggle">Question 1</a>
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

<div>
<a href="#" target="div2" class="toggle">Question 2</a>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum