-2

I am trying to create a product page. I want that when someone, clicks on Buy, a pop-up menu should open. I am trying to use the Checkbox hack to make this work. However, I am unable to do so. The buy button toggles the checkbox succesfully, but the input[type=checkbox]:checked is not working. Please Help. My code follows:

I want the section sizemenu to be hidden and to become visible when I click on the buy button. I apologise if my question is not very clear. Thanks in advance.

Preview: http://codepen.io/anon/pen/mDqpw

UPDATE: Reduced the amount of code to bare minimum.

user3778395
  • 1
  • 1
  • 1
    this is lot of codes.. post only the part you think you cannot make base on your testing – HTTP Jun 26 '14 at 08:26
  • I might be mistaken, but there seems to be no `.sizemenu` in your HTML. Please reduce HTML and CSS to the least amount that shows the problem. – Boldewyn Jun 26 '14 at 08:27
  • Most importantly, post your Javascript that is responsible for this the behavior. – Khalid T. Jun 26 '14 at 08:28
  • I'm really sorry. How do I reduce the code and then post again? – user3778395 Jun 26 '14 at 08:53
  • I found out what I was doing wrong. My checkbox was in a different section and sizemenu was in a different section. Hence the adjacent selector ~ was not able to target sizemenu. Fixed it by removing the checkbox outside, to a section that was adjacent to sizemenu. – user3778395 Jun 26 '14 at 11:43

1 Answers1

0

Are you setting that style on checkbox itself (form element) or label?

http://jsfiddle.net/tt66d/2/

input[type="checkbox"]:checked + label {
    color: blue;
    font-weight: bold;    
}

<input type="checkbox" id="o1" name="products" value="option1">
<label for="o1">Option 1</label>

<input type="checkbox" id="o2" name="products" value="option2">
<label for="o2">Option 2</label>
kasperoo
  • 1,524
  • 1
  • 12
  • 14
  • I am setting the style on the label and hiding the original checkbox. This works successfully. The checkbox gets checked and unchecked. However, the desired action does not happen. – user3778395 Jun 26 '14 at 09:05