Three DIV positioned horizontaly in a webpage that open with jQuery slidetoggle() ?

[c0deM0nK424]

I'm building a simple website for a client of mine who runs his own plumbing and electrical business - the site has been entirely hand coded in CSS and uses CSS3 Animation for image transitions - but these are only visible in IE10 and Mozilla Firefox obviously heh.


here is the site:

http://www.bsplumbandelectric.co.uk

in 'services' - you can see the three Div Elements which are basicaly boxes that hold an image correpsonding to the service type (i.e gas & heating , plumbing and electrical).

I have used jQuery to have content panes open up when the user clicks on any of these service boxes, and new divs will open accordingly (GasInfo, PlumbInfo and ElectricInfo) using some basic jQuery slidetoggle() functions.

What the client wants however is no overlapping of these panes - meaning then, that only one can be open at any one time.

So if i clicked on Gas & Heating - slidetoggle() for GasInfo occurs and the user can read information regarding this service.

IF I know click on Plumbing , slidetoggle() occurs for PlumbInfo and a new content pane opens where the user can read information regarding this service - BUT - the Gas & Heating information remains open too.

I know this is going to involve some conditional statements - but if somebody could point me in the right direction as to how to go abouts tihs - so that if one opens the other closes (only one content pane is opened/slidetoggled at any one forcing any other open one to close/slidetoggle back).

any ideas ?

Also the site when viewed on an iPad - the services page slightly goes off the screen - how to remedy this also ? Try to view it in Mozilla Firefox first please

im working on another site for a differnet client too - and im a relative newb with jQuery but learning it fast, so thats why im a bit pressed for time. Any help/tips appreciated thanks.

 

[jpadie]

this should work (for eg the third panel).

$("#services3").on('click', function(){
 if ( $('#GasInfo').is(':visible') $('#GasInfo').slideToggle();
 if ( $('#PlumbInfo').is(':visible') $('#PlumbInfo').slideToggle();
 $("#ElectricInfo").slideToggle("slow");
});

 

[c0deM0nK424]

tahnks jpadie - but after a few hours of reading stackoverflow forum answers and stuff, I decided to not try using other peoples solutions and experimented a bit myself with the hide() function.

believe it or not - just adding these lines made the difference lol

<script>
$(document).ready(function(){
$("#services1").css('cursor', 'pointer');
$("#GasInfo").hide();
$("#services1").click(function(){
$("#GasInfo").slideToggle("slow");
$("#PlumbInfo").hide();
$("#ElectricInfo").hide();
});
});

$(document).ready(function(){
$("#services2").css('cursor', 'pointer');
$("#PlumbInfo").hide();
$("#services2").click(function(){
$("#PlumbInfo").slideToggle("slow");
$("#GasInfo").hide();
$("#ElectricInfo").hide();
});
});

$(document).ready(function(){
$("#services3").css('cursor', 'pointer');
$("#ElectricInfo").hide();
$("#services3").click(function(){
$("#ElectricInfo").slideToggle("slow");
$("#GasInfo").hide();
$("#PlumbInfo").hide();
});
});

</script>



YEAH - i know the code can be shortened and made to look tidier but im a total newbie with jQuery - could I not have declared all the #services in one line with 'cursor,'pointer') btw ?

btw my changes worked - you can see them in action now.

http://www.bsplumbandelectric.co.uk

thanks again anyway jpadie.

 

[c0deM0nK424]

p.s - and all you final year Bsc Computer Science students - don't copy this code and use it without REFERRING to me as the source

i never completed my final year thesis which was a big shame - nobody helped me, regardless - you can tweak both jpadie's and mine code a hundred times to create the same result im sure of it.


in fact loook here for similar solutions

http://css-tricks.com/forums/discussion/16451/-slidetoggle-one-div-a-time-problems-please-help/p1

and heres the fiddle for one example posted as a solution by someone

http://jsfiddle.net/SCKhf/109/

 

[jpadie]

There is little difference between your code and mine save that my code see slidetoggle to hide (so that the same animations are available) and as a result of that choice also needs to check whether the div is already visible (because if it were invisible then the slidetoggle would show it).

The code can be made a lot more streamlined of course. Either your or mine can be rewritten in four or five lines to cover all three panels.

 

[jpadie]

not tested this but it looks ok.

$[COLOR=#990000]([/color]document[COLOR=#990000]).[/color][b][COLOR=#000000]ready[/color][/b][COLOR=#990000]([/color][b][COLOR=#0000FF]function[/color][/b][COLOR=#990000]()[/color][COLOR=#FF0000]{[/color]
[tab][b][COLOR=#0000FF]var[/color][/b] panels [COLOR=#990000]=[/color] [COLOR=#FF0000]{[/color]
[tab][tab]services1[COLOR=#990000]:[/color] $[COLOR=#990000]([/color][COLOR=#FF0000]'#GasInfo'[/color][COLOR=#990000]),[/color]
[tab][tab]services2[COLOR=#990000]:[/color] $[COLOR=#990000]([/color][COLOR=#FF0000]'#PlumbInfo'[/color][COLOR=#990000]),[/color]
[tab][tab]services3[COLOR=#990000]:[/color] $[COLOR=#990000]([/color][COLOR=#FF0000]'#ElectricInfo'[/color][COLOR=#990000])[/color]
[tab][COLOR=#FF0000]}[/color][COLOR=#990000];[/color]
[tab]$[COLOR=#990000]([/color][COLOR=#FF0000]'div[id |= "services"]'[/color][COLOR=#990000]).[/color][b][COLOR=#000000]on[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'click'[/color][COLOR=#990000],[/color] [b][COLOR=#0000FF]function[/color][/b][COLOR=#990000]()[/color][COLOR=#FF0000]{[/color]
[tab][tab][b][COLOR=#0000FF]for[/color][/b][COLOR=#990000]([/color][b][COLOR=#0000FF]var[/color][/b] i [COLOR=#990000]=[/color] [COLOR=#993399]1[/color][COLOR=#990000];[/color] i [COLOR=#990000]<=[/color] [COLOR=#993399]3[/color][COLOR=#990000];[/color] i[COLOR=#990000]++[/color] [COLOR=#990000])[/color] [b][COLOR=#0000FF]if[/color][/b] [COLOR=#990000]([/color] $[COLOR=#990000]([/color][b][COLOR=#0000FF]this[/color][/b][COLOR=#990000]).[/color][b][COLOR=#000000]attr[/color][/b][COLOR=#990000]([/color]id[COLOR=#990000])[/color] [COLOR=#990000]!=[/color] [COLOR=#FF0000]"services"[/color] [COLOR=#990000]+[/color] i [COLOR=#990000]&&[/color] panels[COLOR=#990000][[/color][COLOR=#FF0000]"services"[/color] [COLOR=#990000]+[/color] i[COLOR=#990000]].[/color][b][COLOR=#000000]is[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]':visible'[/color][COLOR=#990000]))[/color] panels[COLOR=#990000][[/color][COLOR=#FF0000]"services"[/color] [COLOR=#990000]+[/color] i[COLOR=#990000]].[/color][b][COLOR=#000000]slideToggle[/color][/b][COLOR=#990000]();[/color]
[tab][tab][b][COLOR=#0000FF]if[/color][/b][COLOR=#990000]([/color]panels[COLOR=#990000][[/color] $[COLOR=#990000]([/color][b][COLOR=#0000FF]this[/color][/b][COLOR=#990000]).[/color][b][COLOR=#000000]attr[/color][/b][COLOR=#990000]([/color]id[COLOR=#990000])[/color] [COLOR=#990000]].[/color][b][COLOR=#000000]is[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]":hidden"[/color][COLOR=#990000])[/color] [COLOR=#990000])[/color] panels[COLOR=#990000][[/color] $[COLOR=#990000]([/color][b][COLOR=#0000FF]this[/color][/b][COLOR=#990000]).[/color][b][COLOR=#000000]attr[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'id'[/color][COLOR=#990000])[/color] [COLOR=#990000]].[/color][b][COLOR=#000000]slideToggle[/color][/b][COLOR=#990000]();[/color]
[tab][COLOR=#FF0000]}[/color][COLOR=#990000]).[/color][b][COLOR=#000000]css[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'cursor'[/color][COLOR=#990000],[/color][COLOR=#FF0000]'pointer'[/color][COLOR=#990000]);[/color]
[COLOR=#FF0000]}[/color][COLOR=#990000]);[/color]

if you did not care about reusing slideToggle then you could do this

$[COLOR=#990000]([/color]document[COLOR=#990000]).[/color][b][COLOR=#000000]ready[/color][/b][COLOR=#990000]([/color][b][COLOR=#0000FF]function[/color][/b][COLOR=#990000]()[/color][COLOR=#FF0000]{[/color]
[tab][b][COLOR=#0000FF]var[/color][/b] panels [COLOR=#990000]=[/color] [COLOR=#FF0000]{[/color]
[tab][tab]services1[COLOR=#990000]:[/color] $[COLOR=#990000]([/color][COLOR=#FF0000]'#GasInfo'[/color][COLOR=#990000]),[/color]
[tab][tab]services2[COLOR=#990000]:[/color] $[COLOR=#990000]([/color][COLOR=#FF0000]'#PlumbInfo'[/color][COLOR=#990000]),[/color]
[tab][tab]services3[COLOR=#990000]:[/color] $[COLOR=#990000]([/color][COLOR=#FF0000]'#ElectricInfo'[/color][COLOR=#990000])[/color]
[tab][COLOR=#FF0000]}[/color][COLOR=#990000];[/color]
[tab]$[COLOR=#990000]([/color][COLOR=#FF0000]'div[id |= "services"]'[/color][COLOR=#990000]).[/color][b][COLOR=#000000]on[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'click'[/color][COLOR=#990000],[/color] [b][COLOR=#0000FF]function[/color][/b][COLOR=#990000]()[/color][COLOR=#FF0000]{[/color]
[tab][tab][b][COLOR=#0000FF]for[/color][/b][COLOR=#990000]([/color][b][COLOR=#0000FF]var[/color][/b] i [COLOR=#990000]=[/color] [COLOR=#993399]1[/color][COLOR=#990000];[/color] i [COLOR=#990000]<=[/color] [COLOR=#993399]3[/color][COLOR=#990000];[/color] i[COLOR=#990000]++[/color] [COLOR=#990000])[/color] [b][COLOR=#0000FF]if[/color][/b] [COLOR=#990000]([/color] $[COLOR=#990000]([/color][b][COLOR=#0000FF]this[/color][/b][COLOR=#990000]).[/color][b][COLOR=#000000]attr[/color][/b][COLOR=#990000]([/color]id[COLOR=#990000])[/color] [COLOR=#990000]!=[/color] [COLOR=#FF0000]"services"[/color] [COLOR=#990000]+[/color] i [COLOR=#990000])[/color] panels[COLOR=#990000][[/color][COLOR=#FF0000]"services"[/color] [COLOR=#990000]+[/color] i[COLOR=#990000]].[/color][b][COLOR=#000000]hide[/color][/b][COLOR=#990000]();[/color]
[tab][tab][b][COLOR=#0000FF]if[/color][/b][COLOR=#990000]([/color]panels[COLOR=#990000][[/color] $[COLOR=#990000]([/color][b][COLOR=#0000FF]this[/color][/b][COLOR=#990000]).[/color][b][COLOR=#000000]attr[/color][/b][COLOR=#990000]([/color]id[COLOR=#990000])[/color] [COLOR=#990000]].[/color][b][COLOR=#000000]is[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]":hidden"[/color][COLOR=#990000])[/color] [COLOR=#990000])[/color] panels[COLOR=#990000][[/color] $[COLOR=#990000]([/color][b][COLOR=#0000FF]this[/color][/b][COLOR=#990000]).[/color][b][COLOR=#000000]attr[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'id'[/color][COLOR=#990000])[/color] [COLOR=#990000]].[/color][b][COLOR=#000000]slideToggle[/color][/b][COLOR=#990000]();[/color]
[tab][COLOR=#FF0000]}[/color][COLOR=#990000]).[/color][b][COLOR=#000000]css[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'cursor'[/color][COLOR=#990000],[/color][COLOR=#FF0000]'pointer'[/color][COLOR=#990000]);[/color]
[COLOR=#FF0000]}[/color][COLOR=#990000]);[/color]