Hello,
I built an accordion in css3 and it works fluently except in browsers that do not support the :checked psuedo-class.
So to combat this, I thought to use jQuery to cause the content to slide-down once jQuery detected that the input / label above the content is checked.
Here is the basics of my html, which should make what I am trying to do more clear:
- <section>
- <div>
- <input type="checkbox" />
- <label>1</label>
- <article>
- <p> Content...</p>
- <article>
- </div>
- </section>
- <section>
- <div>
- <input type="checkbox" />
- <label>2</label>
- <article>
- <p> Content 2...</p>
- <article>
- </div>
- </section>
- <section>
- <div>
- <input type="checkbox" />
- <label>3</label>
- <article>
- <p> Content 3...</p>
- <article>
- </div>
- </section>
In the $(document).ready I first hide all the <articles> using .hide() function. But then my problems occur when I detect the input being checked and causing the article to .slideDown() if the input is checked.
Of course if that input is unchecked then, then have the article .slideUp()
I have tried every single way I can think of doing this so if anyone has any suggestions or code on how to get the corresponding article to be shown once the input is checked and then unshown once unchecked, I would greatly appreciate it.
Thank you very much in Advance!