Menu

hi,

I have a menu with three buttons

Search by State
Search by City
Search by Church

I am using JQuery for it

what I would like it to do is when the user visit the page I want to automatically open the
button menu that says Search by Church
but
if the user click on any other buttons the page get reloaded the same button that the user clicked on I would like it to be open. all others should be closed.

I am trying to learn Jquery but I am not good at it. so, I need your help.

I have three div and an attached JQuery files and Jquery script

http://www.churchesbulletin.com/post.cfm?CHID=11

<script type="text/javascript" src="JS/jquery-latest.min.js"></script>
<script type="text/javascript" src="JS/jquery-ui.min.js"></script>

<script>

$(document).ready(function() {
    $(".divMain").click(function(){
        $(".divSub").hide();
        $(this).next(".divSub:eq(0)").show(50);
    });
}); 

</script>

_________________________________

<div class="divMain">
		<div align="center" class="BtnSearchByState" style="text-align:center;padding: 0px 0px 0px 0px;" >							
		<input name="BtnSearchByState" type="button" value="" > 
		</div>	
  </div>
	<div class="divSub" style="padding: 0px 0px 0px 0px;">
	Search for 
	<cfif isdefined("form.TxtSearchST") and #form.TxtSearchST# neq "">
    <input id="TxtSearchST" name="TxtSearchST" value="<cfoutput>#form.TxtSearchST#</cfoutput>" style="width: 180px" type="text"/>
	<cfelse>
	 <input id="TxtSearchST" name="TxtSearchST" style="width: 180px" type="text"/>
	 </cfif>
	Filter:&nbsp;  <cfdump var="#session.TxtSearchST#">    
	 <input id="TxtStateST" name="TxtStateST" style="width: 142px" type="text" onKeyUp="setStateOptions(this,'DispStateBoxST');" />

	<cfif isdefined("form.DispStateBoxST") and #form.DispStateBoxST# neq "">
	<select name="DispStateBoxST" size="1" style="width: 180px;"/>
		<option value="" selected="selected">Select State</option>
		<cfoutput query="DispState">
		<cfif (#DispState.StateID# eq #form.DispStateBoxST#)>
		<option value="#DispState.StateID#" selected="selected">#DispState.StateName#</option>
		<cfelse>
		<option value="#DispState.StateID#" >#DispState.StateName#</option>
		</cfif>
		</cfoutput>
	</select>
	<cfelse>
		<select name="DispStateBoxST" size="1" style="width: 180px;"/>
		<option value="" selected="selected">Select State</option>
		<cfoutput query="DispState">
		<option value="#DispState.StateID#" >#DispState.StateName#</option>
		</cfoutput>
	</select>
	</cfif>
	<select name="SelSTPost" size="1" style="width: 180px;"
	onChange="setOptions(this.options[this.selectedIndex].value);"/>
		<option value="" selected="selected">Select type of posting</option>
		<cfoutput query="DispMainMenu">
		<option value="#DispMainMenu.MenuID#" >#DispMainMenu.MainMenuName#</option>
		</cfoutput>
	</select>
	<select name="SelCatg" size="1" style="width: 180px;"/>
		<option value="" selected="selected">Select category</option>
	</select>
	<select name="SelStDt" onChange="GetDateRangeST(this.value)" size="1" style="width: 180px;"/>
		<option value="" selected="selected">Select Date Range</option>
		<option value="3">Last 3 months</option>
		<option value="3-6">Last 3-6 months</option>
		<option value="6-9">Last 6-9 months</option>
		<option value="9-12">Last 9-12 months</option>
		<option value="Clear">Clear Dates</option>
	</select>
	From:&nbsp;<input name="dateFromST" type="text" id="dateFromST" readonly=readonly value="" size="13" style="width: 120px;"/>&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To:&nbsp;<input name="dateToST" type="text" id="dateToST" readonly=readonly value="" size="13"  style="width: 120px;"/>&nbsp;
	Price:&nbsp;<input id='PriceFromST' name="PriceFromST" type="text" onKeyUp="valid_number(this);" value="" size="4" style="width: 63px;"/>  
	<input name="PriceToST" type="text" id="PriceToST" onKeyUp="valid_number(this);" value="" size="4" style="width: 63px;"/>
	 Has image:&nbsp;<input id="ChkST" name="ChkST" type="checkbox" /><br>
	<div align="center" class="myButtonST" style="text-align:center;padding: 6px 0px 0px 0px;" >
<input name="BtnSTSearch" type="button" onclick="valState()" value="" > 
</div>
	 
	 
	 
    
</div>	

<div class="divMain">
	   <div align="center" class="BtnSearchByCity" style="text-align:center;padding: 0px 0px 0px 0px;" >							
		<input name="BtnSearchByCity" type="button" value="" > 
		</div>
</div>
<div class="divSub" style="padding: 0px 0px 0px 0px;">
Search for    
	 <input id="TxtSearchCT" name="TxtSearchCT" style="width: 180px" type="text"/>

 Filter:&nbsp;    
	 <input id="TxtStateCT" name="TxtStateCT" style="width: 142px" type="text" onKeyUp="setStateOptions(this,'DispStateBoxCT');" />

	 <select name="DispStateBoxCT" style="width: 185px;" size="1" 
			   onChange="setCityOptionsCT(this,'TxtCityCT','GetCityCT');"
			   onFocus="this.form.TxtCityCT.value='';" >
			 </select>
			 <cfset strStateListCT="" >
			 <cfloop query="DispState">
			   <cfset strStateListCT=strStateListCT&",['#StateID#','#StateName#']" >
			 </cfloop>
			 <cfoutput>
			 <script>
			   var arrStates=[#Mid(strStateListCT,2,Len(strStateListCT))#];
			   document.forms.FRMAcc.TxtStateCT.onkeyup();
			 </script>
			 </cfoutput> 

Filter:&nbsp;
			 <input id="TxtCityCT"  name="TxtCityCT" style="width: 142px" type="text" onKeyUp="this.form.DispStateBoxCT.onchange()" />

   <select name="GetCityCT" style="width: 185px;" size="1" /> </select>

		<select name="SelSTPostCT" size="1" style="width: 185px;"
	onChange="setOptionsCT(this.options[this.selectedIndex].value);"/>
		<option value="" selected="selected">Select type of posting</option>
		<cfoutput query="DispMainMenu">
		<option value="#DispMainMenu.MenuID#" >#DispMainMenu.MainMenuName#</option>
		</cfoutput>
	</select>
	
	<select name="SelCatCT" size="1" style="width: 185px;"/>
		<option value="" selected="selected">Select category</option>
	</select>

	<select name="SelDtCT" onChange="GetDateRangeCT(this.value)" size="1" style="width: 185px;"/>
		<option value="" selected="selected">Select Date Range</option>
		<option value="3">Last 3 months</option>
		<option value="3-6">Last 3-6 months</option>
		<option value="6-9">Last 6-9 months</option>
		<option value="9-12">Last 9-12 months</option>
		<option value="Clear">Clear Dates</option>
	</select>
	
	
	From:&nbsp;<input name="dateFromCT" type="text" id="dateFromCT" readonly=readonly value="" size="13" style="width: 120px;"/>&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To:&nbsp;<input name="dateToCT" type="text"  id="dateToCT" readonly=readonly value="" size="13"  style="width: 120px;"/>&nbsp;
	Price:&nbsp;<input name="PriceFromCT" type="text" onKeyUp="valid_number(this);" id="PriceFromCT" value="" size="4" style="width: 63px;"/>
	<input name="PriceToCT" type="text" id="PriceToCT" onKeyUp="valid_number(this);" value="" size="4" style="width: 63px;"/>
	 Has image:&nbsp;<input id="ChkCT" name="ChkCT" type="checkbox" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input id="BtnCT" type="button" value="Search" name="BtnCT" onclick="valCity();"/>

</div>

<div class="divMain">
		<div align="center" class="BtnSearchByChurch" style="text-align:center;padding: 0px 0px 0px 0px;" >							
		<input name="BtnSearchByChurch" type="button" value="" > 
		</div>

</div>
<div class="divSub">
Search for    
	 <input id="TxtSearchCH" name="TxtSearchCH" style="width: 180px" type="text"/>

  Filter:&nbsp;    
			<input id="TxtState" name="TxtState" style="width: 142px" type="text" onKeyUp="setStateOptions(this,'DispStateBox');" />

	 <select name="DispStateBox" style="width: 185px;" size="1" 
			   onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');"
			   onFocus="this.form.TxtCity.value='';this.form.TxtChurch.value='';" >
			 </select>
			 <cfset strStateList="" >
			 <cfloop query="DispState">
			   <cfset strStateList=strStateList&",['#StateID#','#StateName#']" >
			 </cfloop>
			 <cfoutput>
			 <script>
			   var arrStates=[#Mid(strStateList,2,Len(strStateList))#];
			   document.forms.FRMAcc.TxtState.onkeyup();
			 </script>
			 </cfoutput> 
	
	Filter:&nbsp;
			 <input id="TxtCity"  name="TxtCity" style="width: 142px" type="text" onKeyUp="this.form.DispStateBox.onchange()" />

	
	         <select name="GetCity" style="width: 185px;" size="1" onChange="setChurchOptions(this,'TxtChurch','GetChurch');"/> </select>

Filter:&nbsp;
		 <input id="TxtChurch" name="TxtChurch" style="width: 142px" type="text" onKeyUp="this.form.GetCity.onchange()" />	

	<select name="GetChurch"  style="width: 185px;" size="1" >
	<option></option>
	</select>

		<select name="SelSTPost" size="1" style="width: 185px;"
	onChange="setOptionsCH(this.options[this.selectedIndex].value);"/>
		<option value="" selected="selected">Select type of posting</option>
		<cfoutput query="DispMainMenu">
		<option value="#DispMainMenu.MenuID#" >#DispMainMenu.MainMenuName#</option>
		</cfoutput>
	</select>
	
	<select name="SelCatCh" size="1" style="width: 185px;"/>
		<option value="" selected="selected">Select category</option>
	</select>
	<select name="SelDtCh" onChange="GetDateRangeCH(this.value)" size="1" style="width: 185px;"/>
		<option value="" selected="selected">Select Date Range</option>
		<option value="3">Last 3 months</option>
		<option value="3-6">Last 3-6 months</option>
		<option value="6-9">Last 6-9 months</option>
		<option value="9-12">Last 9-12 months</option>
		<option value="Clear">Clear Dates</option>
	</select>
	
	
	From:&nbsp;<input name="dateFromCh" type="text" id="dateFromCh" readonly=readonly value="" size="13" style="width: 120px;"/>&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To:&nbsp;<input name="dateToCh" type="text" id="dateToCh" readonly=readonly value="" size="13"  style="width: 120px;"/>&nbsp;
	Price:&nbsp;<input name="PriceFromCh" type="text" onKeyUp="valid_number(this);" id="PriceFromCh" value="" size="4" style="width: 63px;"/>
	<input name="PriceToCh" type="text" id="PriceToCh" onKeyUp="valid_number(this);" value="" size="4" style="width: 63px;"/>
	 Has image:&nbsp;<input id="ChkCh" name="ChkCh" type="checkbox" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input id="BtnCh" type="button" value="Search" name="BtnCh" onclick="valChurch();"/>
	
	
	
</div>

Open in new window

lulu50Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
download this plugin : https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
put it in your JS folder and
add this line 5 :
<script type="text/javascript" src="JS/jquery.cookie.js"></script>

now an update :


$(document).ready(function() {

    $(".divMain").click(function(){
$.cookie('last_select', $(this).find(":button").attr("name"));
        $(".divSub").hide();
        $(this).next(".divSub:eq(0)").show(50);
    });


var last_select = $.cookie('last_select');
if( last_select == null ) {
    $.cookie('last_select', "BtnSearchByChurch");
    $(":button[name='BtnSearchByChurch']").closest(".divMain").trigger("click");
}
else {
    $(":button[name='" + last_select + "']").closest(".divMain").trigger("click");
}

});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lulu50Author Commented:
leakim971:

I uploaded jquery.cookie.js to my JS folder

and included the file on my page

<script type="text/javascript" src="JS/jquery.cookie.js"></script>

the updated the above code.

I am getting error that says

Jquery is undefined  I am not sure what i did wrong?
leakim971PluritechnicianCommented:
add this line 5 :
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

lulu50Author Commented:
do you mean like this?
Menu.gif
leakim971PluritechnicianCommented:
the line 5 in your current question, not on your site

<script type="text/javascript" src="JS/jquery-latest.min.js"></script>
<script type="text/javascript" src="JS/jquery-ui.min.js"></script>
<!-- HERE -->
<script>
lulu50Author Commented:
leakim971:

Wow Wow and Wow this is great!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

you are good A++++++++++++++++++++++++++++++++++

This is beautiful that's how I want it great now I can continue.

this is sharp sharp sharp and sharp!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Thank you for all your help.  



lulu50Author Commented:
leakim971:

I don't know how to say this but I have one more question than I leave you alone.

I have to open a new question for it and I hope you help this time too!!!!!

this is great!!!!   cannot do it without your help.  THANK YOU

lulu50Author Commented:
A++++++++++++++++++++++

EXCELLENT!!!!!!!!!!!!!!!!!!!!!!!!!!!
leakim971PluritechnicianCommented:
you're welcome, thanks for sharing your happiness
see you later
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.