You'd just need to add
href attributes to the links which go to the same content that you'll be placing using jQuery, and add
return false; inside the click events. Like so:
Code:
$(document).ready(function() { $("#midweek").click(function() { $("#servicesBox").html("<h4>Exclusive Use - Midweek</h4><p>You can access the venue anytime from 7am on the days your havereserved by using the secure code you will have been given. Allrefreshment facilities will be ready and waiting for you.</p><p>Catering will be delivered to you at your designated time, if you have pre-ordered it.</p><p>The venue is yours to use for the day. No one else will disturbyou. No phones, other than those you bring with you will interruptyour event.We can set up the room to your requirements aheadof your event or you can control how you would like it to be on the day.</p><p>No one will be hassling you to leave the venue at the end of the day, so relax and enjoy it.</p>"); return false; }); $("#evening").click(function() { $("#servicesBox").html("<h4>Exclusive Use - Evenings</h4><p>Use our venue in the evenings forul><li>Training sessions</li><li>Networking events</li><li>Clubs and societies meetings</li><li>Sales events</li><li>...And much more.</li></ul></p><p>Subdued lighting, and background music is available as required.</p>"); return false; }); $("#weekend").click(function() { $("#servicesBox").html("<h4>Exclusive Use - Weekends</h4><p>Whether for social or working purposes our venue is perfectfor you on the weekend.</p><p>For work, our quality conferencing facilities are availableto you. For social events – use our venue for family gatherings,societies and groups, birthday celebrations. We have no licenseto sell alcohol but no objection to its consumption on the premises.Tell us your needs and we will design and event to match.</p><p>We can arrange: Catering, Florists, Balloons, Specialist lighting,Audio visual needs, Red carpets, Background music, and Limo deliveryand collection.</p><p> Please arrange to visit the venue if you would like view itand discuss your needs with us. </p>"); return false; }); $("#multiple").click(function() { $("#servicesBox").html("<h4>Exclusive Use - Multiple Bookings</h4><p>If you and your organisation would like to use our venue foryour regular events, then please arrange to meet with one ofour advisers who can organise events to meet your needs and identifyfor you the savings through discounted rates that can be madeavailable to you.</p><p>If you would like to set up a corporate membership account withus, please get in touch.</p>"); return false; }); });
HTML:
<div style="width: 100%; height:70px; margin-left:65px;" id="servicemenu">
<h3 class="abouthd"><a href="link_to_midweek_infopage" id="midweek">Midweek</a></h3>
<h3 class="abouthd"><a href="link_to_evening_infopage" id="evening">Evening</a></h3>
<h3 class="abouthd"><a href="link_to_weekend_infopage" id="weekend">Weekend</a></h3>
<h3 class="abouthd"><a href="link_to_multiple_infopage" id="multiple">Multiple Bookings</a></h3>
</div>
<div id="servicesBox">
<h4>text thats going to be changed</h4>
</div>
That will make it
work, but you could make it better by utilising a couple of cool jQuery features.
First of all, having the contents of the box hard coded into the script itself is a little cumbersome. Having it in two places (script and static page) is also a bit of a hassle. What we can do is use ajax to load the information from the static page into the content box instead.
Lets say our static page with the midweek info is called
midweek_infopage.htm. To load the content of that page into our div it's as simple as calling
Code:
$("#servicesBox").load('midweek_infopage.htm');
and the entire contents of that page get automagically loaded in.
Great, you say, but your static page will probably have other content around the specific information you want. It'll be a whole other page of your site presumably, with headers, and navigation, and so on. Handily the jQuery load() function allows you to select which specific items you want to fetch from the target page. So in
midweek_infopage.htm, lets say you wrap the information you need to load into your box in a div called
info:
HTML:
<!-- Other page content here, header, nav, etc. -->
<div id="info">
<h4>Exclusive Use - Midweek</h4><p>You can access the venue anytime from 7am on the days your have reserved by using the secure code you will have been given. All refreshment facilities will be ready and waiting for you.</p><p>Catering will be delivered to you at your designated time, if you have pre-ordered it.</p><p>The venue is yours to use for the day. No one else will disturbyou. No phones, other than those you bring with you will interrupt your event.We can set up the room to your requirements ahead of your event or you can control how you would like it to be on the day.</p><p>No one will be hassling you to leave the venue at the end of the day, so relax and enjoy it.</p>
</div>
<!-- More page content here -->
To fetch
just the contents of that div from
midweek_infopage.htm we can use:
Code:
$("#servicesBox").load('midweek_infopage.htm #info');
And hey presto, in it goes. So now when you want to update the content you'll only have to update your static page instead of fumbling around with quoted strings within the script too.
The next thing we can do is to make your code a little more elegant. Instead of giving an id to every individual link and making a click event for each, we can just target all the links using your #servicemenu div, and let jQuery work out what information it needs to fetch using the
$(this) object. It's a little complex to explain in words but hopefully the code will let you see what's happening here:
Code:
$(document).ready(function() { $("#servicemenu a").click(function() { /* When the user clicks any link in #servicemenu: */ $("#servicesBox").load($(this).attr('href') + ' #info'); /* Load the #info div from the page in the 'href' attribute of the link that was just clicked into our box */ return false; }); });
HTML:
<div style="width: 100%; height:70px; margin-left:65px;" id="servicemenu">
<h3 class="abouthd"><a href="midweek_infopage.htm">Midweek</a></h3>
<h3 class="abouthd"><a href="evening_infopage.htm">Evening</a></h3>
<h3 class="abouthd"><a href="weekend_infopage.htm">Weekend</a></h3>
<h3 class="abouthd"><a href="multiple_infopage.htm">Multiple Bookings</a></h3>
</div>
<div id="servicesBox">
<h4>text thats going to be changed</h4>
</div>