-1

Hi I needed assistance with having the “show/hide div” below show and hide when you click on either of the checkboxes in a section. I am planning on having multiple sections and the number is unknown, so it will not be possible to use ID's. So I was looking for a generic way if a checkbox in one region is clicked the “show/hide” only shows up in that region. I know you can probably achieve this by writing individual code and assigning ID’s for each section, but is there a way to make it function like I am visioning to avoid having to constantly update of the code? Is it possible to just target the closest div or next to element to achieve this when the checkbox is checked/unchecked or call css classes?

Here is my HTML

<!--section 1 --> 
section 1
<div class="showHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
    </div>
</div>

section 2    
<!--section 2 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
    </div>
</div>

section 3  
<!--section 3 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
    </div>
</div>

section 4    
<!--section 4 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
    </div>
</div>
Dave
  • 10,748
  • 3
  • 43
  • 54
dalondon
  • 73
  • 11

2 Answers2

1

Once you fix the invalid html (you need to add a closing </div> for <div class="custom-input">), you could use

$(this).closest('.custom-input').prev('.ShowHideDiv') //where $(this) is the checkbox

Refer this fiddle for an example (based on the comments) that hides the <div> if none of the checkboxes are checked, and displays the <div> if one or both the checkboxes are checked

  • Hi Stephan, Thank you but this is not working even when I fixed the div error. My apologies on that. Is there a script that will work and show and hide the div? – dalondon Aug 01 '14 at 00:56
  • Just add `.toggle()` if you want to change the visibility state (It wasn't clear what you wanted to do - I just showed you how to select it) –  Aug 01 '14 at 01:12
  • thanks Stephan.. is there any way this can work with jquery. 1.6? I know its old but seems like that version it doesn't work. – dalondon Aug 01 '14 at 02:01
  • You need to post your complete jquery code so I can check, but if your using `$('.checkbox').on('click', function() {...` the you need to replace `.on` with `.live` for earlier versions of jquery. –  Aug 01 '14 at 02:04
  • one problem I have is that you used click as a method. So if one checkbox clicks it and the other does its causing issues.. is there anyway to have the div hidden and then if a box is checked it appears. and if you check the other box it doesn't hide it – dalondon Aug 01 '14 at 02:44
  • Yes of course, but the reason I did not show the full code is because it was not clear what you want to happen. What visibility state do you want when: (a) both are unchecked; (b) only the first one is checked; (c) only the second one is checked; (d) both are checked? –  Aug 01 '14 at 02:52
  • a) show no div b) show div c) show div ... when one is checked and checking the other should not close it. they both have to be unchecked – dalondon Aug 01 '14 at 02:56
  • thank you so much. It works great.. one last question. Is it possible to achieve this with just regaular javascript without calling the jquery? – dalondon Aug 01 '14 at 04:59
  • Yes, but have a go yourself, and if you have problems, ask a new question - after all you tagged this one `jquery` :) –  Aug 01 '14 at 05:03
  • please can you help? I am really not skilled enough to write it. I am not proficient at all in javascript – dalondon Aug 01 '14 at 05:24
  • 1
    You need to understand how SO works. I have answered the question you posted. If it solved your problem, then up vote and/or accept. What your asking now is a different question so should be posted as a **new** question to help others as well, but you should at least make an attempt or you will get down votes. Have a look [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript) to get you started. Also have a look at [this question](http://stackoverflow.com/questions/978799/is-there-an-easy-way-to-convert-jquery-code-to-javascript), in particular comments about "why do this" –  Aug 01 '14 at 05:37
  • hi so what if the
    SHOW/HIDE THIS DIV
    was wrapped in a div? how would that work?     – dalondon Aug 01 '14 at 18:49
  • @dalondon I am not sure why you tried to deface my answer. It shows very poor manners... do you mind sharing why you thought it was appropriate to do so? – blurfus Aug 06 '14 at 17:25
0

I would do it like this:

$('.checkbox').on('click', function(){
    $(this).closest('.custom-input').prev('.showHideDiv').toggle();
});

Just make sure your markup is closed properly and all your showHideDiv classes are exactly the same (i.e. right now some start with lowercase and some start with uppercase)

updated

http://jsfiddle.net/EEj29/

blurfus
  • 13,485
  • 8
  • 55
  • 61