Javascript expandable div issue..

I'm customizing a piece of javascript I obtained from http://tuljo.com/web-development/expanding-collapsing-sliding-div-jquery on my site here: http://bubbleweb.eu/qi/index.html

Basically, if you click the login button at top it does exactly what I want it to do. The issue comes when you click the contact button next to login. I want that to direct straight to contact.html but it is just opening the expandable div again. Is there any way I can force this link to overide the exandable div and open the contact page? Because I still want the contact button to be part of the expandable div for the effect on open and close.

I hope that makes sense.

Thanks in advance,
Jamie

 

No offense, but given how tiny the login is in the first place, why are you screwing around with scripttardery to show/hide it? Seems like a waste of code, waste of time, waste waste waste.

Though given the accessibility disaster that site is in terms of illegible colour contrasts, absurdly undersized fixed metric (px) font declarations, and broken attempt at being responsive (do I smell bootcrap?) throwing more scripting at an already ridiculously bloated page hardly seems like the answer...

What with wasting 1.8 megabytes in 43 files to deliver 1598 bytes of plaintext and four content images being around four times the total filesizes and four times the number of separate files such a simple page needs. 649k of CSS in ten separate files? 322k of JS in 11 separate files? FOR THAT?!? Static style in the markup, no logical document structure, endless pointless DIV and classes for nothing... It even has that mouth breathing dreamweaver mm_swap idiocy in there to do CSS' job.

Under the hood it's such a train wreck of how not to build a website, rather than trying to "fix" the scripttardery for the login I'd suggest going and finding a stick to scrape that bootcrap off with, backing the **** away from the disaster known as jQuery, and rewriting the markup with separation of presentation from content and actually bothering to write HTML and CSS properly.

What you have there is 100% typical of what one can expect when garbage like Dreamweaver, Bootcrap and jQueery are slapped together any old way, which is why my advice would be to toss that entire mess and start over as there is NOTHING I would even TRY to salvage from that site. You've basically got megabytes doing kilobyte's job, design elements that have no business on a website in the first place, non gracefully degrading scripttardery, and complete accessibility failings that mean the entire concept needs to be started over if you care about users actually wanting to, well... use that site.

I'm sorry if that sounds harsh, but reality often is. I figured someone should tell you that before you waste more time painting yourself even farther into the corner.

Though, you do not actually seem to HAVE a form, just the elements that go inside a form without the form/fieldset/labels and all the other stuff a login should have, so just how are you expecting it to do anything? Are you making it 100% reliant on scripttardery or something?!?

 

Apart from what @deathshadow said, the function of whatever script you're using doesn't look pretty - it jumps, it shifts the buttons around, and it doesn't look professional at all - if you want to keep using something like it, you should take a quick look at recoding it so it works better - besides, unless the script is completely retarded, clicking the "contact"-button shouldn't do anything for the slide - that should be triggered by an ID (click on the button that says "login"), nothing else. If it does, it's stupid, and should be nixed.
BTW - with the proper CSS and proper coding, most of that should be doable in pure CSS - failing that, max four lines of jQuery should do the same (basically, you want a slide-in, slide-out function). I didn't really look at the script source you provided, but I'm thinking it has a bit more code than that...

 

Cheers for the comments man, it was a bootstrap theme I downloaded from wrapbootstrap. So it wasn't started from scratch. Comments are good to hear though good or bad, I realise there's a lot of unused script but it needed to be turned round fast so this was the quickest route.

 

The problem is here:

<div id="mySlideToggler" class="pull-right" style="  top: -20px; margin-right: 148px; width: 100px;background-image: url(images/temp/login.jpg); background-repeat: repeat-x; height: 38px; padding: 5px 0 0 30px; color: #fff;">
    <a href="#" style="color:#fff">Login &#x25BC;</a><script type="text/javascript">
    $(function(){
        $('#mySlideContent').css('display','none');
        $('#mySlideToggler').click(function(){
            $('#mySlideContent').slideToggle('slow');
            $(this).toggleClass('slideSign');
            return false;
        });
    });
</script> <div style="margin-left: 72px;
  margin-top: -26px;;
  width: 110px;
  background-color: #294a5a;
  height: 38px;
  padding: 5px 0 0 30px;
  color: #fff;"><a href="contact.html"  style="color:#fff">Contact</a> </div>
</div>

Code (markup):

Move the div holding <a href="contact.html" style="color:#fff">Contact</a> tag to outside of <div id="mySlideToggler"></div> and it will be fixed.