Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using Mootools "FxSlide" to show and hide text. But...

    This should be a simple fix.. I hope.

    JS:
    Code:
    //-- 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:
    Code:
        <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 :\

  • #2
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My friend helped me and changed the JS to the following, but I still cant get it to work:

    JS:
    Code:
    $$('.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:
    Code:
      <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>
    Last edited by SaturdaysKids; 11-02-2011 at 12:18 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •