psuedo-accordion?

psuedo-accordion?

I'm trying to get this to work sort of like an accordion menu, i wrote it all from scratch so there is probably a lot of bad practices, just as a disclaimer.

I would like to only show one div at a time, so when I click one it closes all the others. I've no idea how to do this without what seems to be an extraneous amount of code. its already pretty bulky.

here is what I have so far (its same code for each div):

its also available here for XHTML reference http://www.addhavoc.com/services.html
  1. $(document).ready(function(){
        $('.nobg').show();
       
        $('.serviceContent-web').hide();
        function slideWeb() {  
            $('.porfolio-link').hide();
            $('.purple').hide();
            $('.services-image').hide()
            $('.serviceContent-web').slideToggle("slow");
            $('.purple').delay(1000).fadeIn("slow");
            $('.porfolio-link').delay(1000).fadeIn("slow");
            $('.services-image').delay(1000).fadeIn("slow");
                }  
        $(".service-web").click(slideWeb, stop);
        $(".serviceContent-web").click(stop, slideWeb);    
       
        $('.serviceContent-ad').hide();
        function slideAd() {  
            $('.porfolio-link').hide();
            $('.purple').hide();
            $('.services-image').hide()
            $('.serviceContent-ad').slideToggle("slow");
            $('.purple').delay(1000).fadeIn("slow");
            $('.porfolio-link').delay(1000).fadeIn("slow");
            $('.services-image').delay(1000).fadeIn("slow");
                }  
        $(".service-ad").click(slideAd, stop);
        $(".serviceContent-ad").click(stop, slideAd);
       
       
        $('.serviceContent-branding').hide();
        function slideBrand() {  
            $('.porfolio-link').hide();
            $('.purple').hide();
            $('.services-image').hide()
            $('.serviceContent-branding').slideToggle("slow");
            $('.purple').delay(1000).fadeIn("slow");
            $('.porfolio-link').delay(1000).fadeIn("slow");
            $('.services-image').delay(1000).fadeIn("slow");
                }  
        $(".service-branding").click(slideBrand, stop);
        $(".serviceContent-branding").click(stop, slideBrand);
       
           
        $('.serviceContent-package').hide();
        function slidePackage() {  
            $('.porfolio-link').hide();
            $('.purple').hide();
            $('.services-image').hide()
            $('.serviceContent-package').slideToggle("slow");
            $('.purple').delay(1000).fadeIn("slow");
            $('.porfolio-link').delay(1000).fadeIn("slow");
            $('.services-image').delay(1000).fadeIn("slow");
                }  
        $(".service-package").click(slidePackage, stop);
        $(".serviceContent-package").click(stop, slidePackage);
       
           
        $('.serviceContent-design').hide();
        function slideDesign() {  
            $('.porfolio-link').hide();
            $('.purple').hide();
            $('.services-image').hide()
            $('.serviceContent-design').slideToggle("slow");
            $('.purple').delay(1000).fadeIn("slow");
            $('.porfolio-link').delay(1000).fadeIn("slow");
            $('.services-image').delay(1000).fadeIn("slow");
                }  
        $(".service-design").click(slideDesign, stop);
        $(".serviceContent-design").click(stop, slideDesign);
       
           
        $('.serviceContent-logo').hide();
        function slideLogo() {  
            $('.porfolio-link').hide();
            $('.purple').hide();
            $('.services-image').hide()
            $('.serviceContent-logo').slideToggle("slow");
            $('.purple').fadeIn("slow");
            $('.porfolio-link').delay(1000).fadeIn("slow");
            $('.services-image').delay(1000).fadeIn("slow");
                }  
        $(".service-logo").click(slideLogo, stop);
        $(this).click(stop, slideLogo);
         });