Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    Hi everyone

    Im working on a site here:

    http://www.clients.thepdgroup.co.uk/evo/index.php

    I designed it myself in terms of visuals but got the jquery functionality (the fact that its an accordion) and overall framework for it elsewhere as im not a jquery person really.

    So, for those who are clevererer than me and DO know jquery..

    I want to know whether i can:

    a) insert a text link into the content of one of the sections (each section is within a <div class="content">), that on click, will open a different section? eg if i put a link on the homepage section saying “contact us”, when clicked, would make the contact “tab” slide over and reveal contact us section?

    b) create a link that would take the user to a version of the page where the accordion is by default open on a different section? (in my contact form, i have an error page, and it says "click here to go back and try again" and at the moment obviously as there is no separate contact page it just goes back to index.php. I'd prefer to be able to provide a link that will take the user back to the site but with the contact section open rather than the home section)

    The javascript used for the accordion:

    Code:
    jQuery.fn.extend({
      haccordion: function(params){
        var jQ = jQuery;
        var params = jQ.extend({
          speed: 500,
          headerclass: "header",
          contentclass: "content",
          event: "click",
          contentwidth: 721
        },params);
        return this.each(function(){
         this.opened = jQ("."+params.contentclass,this).filter(".visible").prev();
          jQ("."+params.headerclass,this).click(function(){
            var p = jQ(this).parent()[0];
            if (p.opened != "undefined"){
              jQ(p.opened).next("div."+params.contentclass).animate({
                width: "0px"
              },params.speed);
            }
            p.opened = this;
            jQ(this).next("div."+params.contentclass).animate({
              width: params.contentwidth + "px"
            }, params.speed);
          });
        });
      }
    });

    Or, if easier, all relevant files here as a zip: http://www.clients.thepdgroup.co.uk/evo/Archive.zip

    If you download this zip, you'll need to be looking at the file named jquery.js within the js directory, for the custom scripting for the accordion, i dont know why someone called it jquery.js, its confusing but there you have it! the actual jquery framework itself is referenced like this: <script src="js/jquery.tools.js"></script>

  2.  

  3. #2
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    Update:

    For my question a) I have figured that the bit in bold below defines what is clickable in order to move the slider:

    jQuery.fn.extend({
    haccordion: function(params){
    var jQ = jQuery;
    var params = jQ.extend({
    speed: 500,
    headerclass: "header",
    contentclass: "content",
    event: "click",
    contentwidth: 721
    },params);
    return this.each(function(){
    this.opened = jQ("."+params.contentclass,this).filter(".visible" ).prev();
    jQ("."+params.headerclass,this).click(function(){
    var p = jQ(this).parent()[0];
    if (p.opened != "undefined"){
    jQ(p.opened).next("div."+params.contentclass).anim ate({
    width: "0px"
    },params.speed);
    }
    p.opened = this;
    jQ(this).next("div."+params.contentclass).animate( {
    width: params.contentwidth + "px"
    }, params.speed);
    });
    });
    }
    });

    I would need to add this code
    <div class="header"><h2 class="about"><span>About</span></h2></div>
    to insert the link i guess, somehow..

    i did try this in this basic form, unsure of whether this was correct. it didn't seem to work so i think maybe jquery gets confused because there are 2 instances of the same thing it has to deal with (theres already a <div class="header"><h2 class="about"><span>About</span></h2></div>)

    so i am wondering, how do i include another set of classes/content in the above jquery to also make the same thing happen when i insert a text link, for example with <div class="textlink"><h2 class="contact">the link here.. as the html code ?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:33 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com