Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 242
  • Last Modified:

Help I need help Please

Hi,

this is my site

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

I am working on the menu

there is three buttons

Search by State

Search by City

Search by Church

when I click on the "search by state" button

It display the div for the state but then I cannot select a state?

Please, tell me what I am doing wrong.

Thanks,

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


<script>
$(document).ready(function() {
	$(".divCollapsablePanel").click(function(){
		$(".divCollapsablePanelDetail").hide();
		//$(".divCollapsablePanelDetail",this).show(1000);
		$(".divCollapsablePanelDetail",this).show(100);

	});
});
</script>


_______________________________________________________

<div class="divCollapsablePanel">
		<div align="center" class="BtnSearchByState" style="text-align:center;padding: 0px 0px 0px 0px;" >							
		<input name="BtnSearchByState" type="button" value="" > 
		</div>
<div class="divCollapsablePanelDetail">
<div>&nbsp;</div>
	Filter State:&nbsp;<input name="txtST" size="13" value="" type="text"/>
	<select name="SelST" size="1" style="width: 100px;"/>
	<option>Michigan </option>
	</select>
</div>
</div>

<div class="divCollapsablePanel">
	   <div align="center" class="BtnSearchByCity" style="text-align:center;padding: 0px 0px 0px 0px;" >							
		<input name="BtnSearchByCity" type="button" value="" > 
		</div>
<div class="divCollapsablePanelDetail">
<div>&nbsp;</div>
	Filter State:&nbsp;<input name="txtSTCT" size="13" value="" type="text"/>
	<select name="SelSTCT" size="1" style="width: 100px;"/>
	<option>Michigan </option>
	</select>
	
<div>&nbsp;</div>
	Filter City:&nbsp;<input name="txtSTST" size="13" value="" type="text"/>
	<select name="SelSTST" size="1" style="width: 100px;"/>
	<option>Sterling heights </option>
	</select>
</div>
</div>

<div class="divCollapsablePanel">
		<div align="center" class="BtnSearchByChurch" style="text-align:center;padding: 0px 0px 0px 0px;" >							
		<input name="BtnSearchByChurch" type="button" value="" > 
		</div>
<div class="divCollapsablePanelDetail">
<div>&nbsp;</div>
	Filter State:&nbsp;<input name="txtChST" size="13" value="" type="text"/>
	<select name="SelChST" size="1" style="width: 100px;"/>
	<option>Michigan </option>
	</select>
	
<div>&nbsp;</div>
	Filter City:&nbsp;<input name="txtChCT" size="13" value="" type="text"/>
	<select name="SelChCT" size="1" style="width: 100px;"/>
	<option>Sterling heights </option>
	</select>
	
<div>&nbsp;</div>
	Filter Church:&nbsp;<input name="txtChCh" size="13" value="" type="text"/>
	<select name="SelChCh" size="1" style="width: 100px;"/>
	<option>St Patricks </option>
	</select>
</div>
</div>

Open in new window

0
lulu50
Asked:
lulu50
  • 11
  • 8
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
you've :
      $(".divCollapsablePanel").click(function(){
            $(".divCollapsablePanelDetail").hide();
            //$(".divCollapsablePanelDetail",this).show(1000);
            $(".divCollapsablePanelDetail",this).show(100);
      });

the dropdown is inside the CollapsablePanel
So each time you click on the dropdown your code is executed
You should put divCollapsablePanelDetail outside your divCollapsablePanel
0
 
lulu50Author Commented:
I made changes just to the state and put the div outside it did not work.
my toggle is not work


      
<div class="divCollapsablePanel">
		<div align="center" class="BtnSearchByState" style="text-align:center;padding: 0px 0px 0px 0px;" >							
		<input name="BtnSearchByState" type="button" value="" > 
		</div>
  </div>
<div class="divCollapsablePanelDetail">
<div>&nbsp;</div>
	Filter State:&nbsp;<input name="txtST" size="13" value="" type="text"/>
	<select name="SelST" size="1" style="width: 100px;"/>
	<option>Michigan </option>
	</select>
</div>

Open in new window

0
 
rar3zCommented:
Yup, was gonna say the same thing..  You just beat me to it :)
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
rar3zCommented:
Change the name of "divCollapsablePanel" and "divCollapsablePanelDetails" a bit, dont keep the same, when jquery is applying for the panel only it seems to be acting upon detail as well due to it's preceding name. change the name of the divecollapsablepaneldetails to something different.
0
 
leakim971PluritechnicianCommented:
replace :
      $(".divCollapsablePanel").click(function(){
            $(".divCollapsablePanelDetail").hide();
            //$(".divCollapsablePanelDetail",this).show(1000);
            $(".divCollapsablePanelDetail",this).show(100);
      });
by :
      $(".divCollapsablePanel").click(function(){
            $(".divCollapsablePanelDetail").hide();
            //$(".divCollapsablePanelDetail",this).show(1000);
            $(this).next(".divCollapsablePanelDetail").show(100);
      });
0
 
rar3zCommented:
While keeping your old code structure, I've changed the name of "divCollapsablePanelDetails" to "divCollapsablesPanelsDetail" and tried, and I was able to select the state.
0
 
lulu50Author Commented:
leakim971

I tried this but it didn't work

<script>
$(document).ready(function() {
      $(".divMain").click(function(){
            $(".divSub").hide();
            //$(".divSub",this).show(100);
            $(this).next(".divSub").show(100);

      });
});
</script>
0
 
lulu50Author Commented:
I changed the names it's not working


<script>
$(document).ready(function() {
	$(".divMain").click(function(){
		$(".divSub").hide();
		//$(".divSub",this).show(100);
		$(this).next(".divSub").show(100);

	});
});
</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 class="divSub">
<div>&nbsp;</div>
	Filter State:&nbsp;<input name="txtST" size="13" value="" type="text"/>
	<select name="SelST" size="1" style="width: 100px;"/>
	<option>Michigan </option>
	</select>
</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 class="divSub">
<div>&nbsp;</div>
	Filter State:&nbsp;<input name="txtSTCT" size="13" value="" type="text"/>
	<select name="SelSTCT" size="1" style="width: 100px;"/>
	<option>Michigan </option>
	</select>
	
<div>&nbsp;</div>
	Filter City:&nbsp;<input name="txtSTST" size="13" value="" type="text"/>
	<select name="SelSTST" size="1" style="width: 100px;"/>
	<option>Sterling heights </option>
	</select>
</div>
</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 class="divSub">
<div>&nbsp;</div>
	Filter State:&nbsp;<input name="txtChST" size="13" value="" type="text"/>
	<select name="SelChST" size="1" style="width: 100px;"/>
	<option>Michigan </option>
	</select>
	
<div>&nbsp;</div>
	Filter City:&nbsp;<input name="txtChCT" size="13" value="" type="text"/>
	<select name="SelChCT" size="1" style="width: 100px;"/>
	<option>Sterling heights </option>
	</select>
	
<div>&nbsp;</div>
	Filter Church:&nbsp;<input name="txtChCh" size="13" value="" type="text"/>
	<select name="SelChCh" size="1" style="width: 100px;"/>
	<option>St Patricks </option>
	</select>
</div>
</div>

Open in new window

0
 
leakim971PluritechnicianCommented:
you let divsub inside divmain...
need to be outside like the previous one with the other name

divCollapsablePanel (divmain)
divCollapsablePanelDetail (divsub)
0
 
leakim971PluritechnicianCommented:
if you don't want to put divsub outside divmain, use :
$(document).ready(function() {
      $(".BtnSearchByState").click(function(){
            $(".divSub").hide();
            //$(".divSub",this).show(100);
            $(this).next(".divSub").show(100);

      });
});
0
 
lulu50Author Commented:
leakim971,

if I have the divsub outside the divmain (it's still not working)
<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">
<div>&nbsp;</div>
	Filter State:&nbsp;<input name="txtST" size="13" value="" type="text"/>
	<select name="SelST" size="1" style="width: 100px;"/>
	<option>Michigan </option>
	</select>
</div>

Open in new window

0
 
leakim971PluritechnicianCommented:
replace :
$(document).ready(function() {
    $(".BtnSearchByState").click(function(){
        $(".divSub").hide();
        $(".divSub",this).show(100);

    });
});

Open in new window

by :
$(document).ready(function() {
    $(".BtnSearchByState").click(function(){
        $(".divSub").hide();
        $(this).parent().next(".divSub").show();
    });
});

Open in new window

0
 
lulu50Author Commented:
I did but now it won't toggle and search by city is not working or the church
0
 
leakim971PluritechnicianCommented:
replace :
$(document).ready(function() {
    $(".BtnSearchByState").click(function(){
        $(".divSub").hide();
        $(this).parent().next(".divSub").show();
    });
});
by :
$(document).ready(function() {
    $(".BtnSearchByState,.BtnSearchByCity,.BtnSearchByChurch").click(function(){
        $(".divSub").hide();
        $(".divSub",this).show(100);

    });
});
0
 
leakim971PluritechnicianCommented:
sorry replace :
$(document).ready(function() {
    $(".BtnSearchByState").click(function(){
        $(".divSub").hide();
        $(this).parent().next(".divSub").show();
    });
});

by :
replace :
$(document).ready(function() {
    $(".BtnSearchByState,.BtnSearchByCity,.BtnSearchByChurch").click(function(){
        $(".divSub").hide();
        $(this).parent().next(".divSub").show();
    });
});

0
 
leakim971PluritechnicianCommented:
try this one too :

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

Open in new window

0
 
lulu50Author Commented:
it doesn't like the combination

(".BtnSearchByState,.BtnSearchByCity,.BtnSearchByChurch").
0
 
leakim971PluritechnicianCommented:
>it doesn't like the combination

you paste the wrong code

use :
$(document).ready(function() {
    $(".BtnSearchByState,.BtnSearchByCity,.BtnSearchByChurch").click(function(){
        $(".divSub").hide();
        $(this).parent().next(".divSub").show();
    });
});

Open in new window

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

Open in new window

0
 
lulu50Author Commented:
It works great

leakim971

thank you so much for helping me.

This is great until my next question.
0
 
lulu50Author Commented:
Great!!!!!

Thank you leakim971
0
 
leakim971PluritechnicianCommented:
you're welcome, see you soon
0
 
leakim971PluritechnicianCommented:
replace :
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/jquery-latest.min.js"></script>  
by :
<script type="text/javascript" src="JS/jquery-latest.min.js"></script>  
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 11
  • 8
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now