Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

jquery accordion site question

Discussion in 'Website Design Forum:' started by bamme, Apr 15, 2011.

  1. bamme

    bamme Senior Member

    Hi everyone

    Im working on a site here:

    Green Computing | Evo Computing Services

    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:

    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:

    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/"></script>

    Footnote: i realise this sort of question is going to probably pee some people off; "why doesnt she just learn jquery" "why doesnt she wait until she can write that from scratch before she makes a site like that". well, i study fulltime after work. i study social media marketing; nothing to do with jquery. i know. but im required to do stuff like this at work, theyre aware of how i do it, and altho i would very much like to learn jquery (along with php and better css) theres no time for me to do this at the moment, so i try to pick up "hands on" learning as i go, via help from forums, and make note each time so that i build up my own little tutorials if you like :)

    just thought id say.

Share This Page