div中的内容未显示

Question

I have this hidden div and when i click a button it shows right but when i try to put a <p> inside the div it wont show, only if I take out <p> everything is good but i only want to put style to the paragraph like <br> and other stuff to make it look better. please take a look at this JSFiddle

html

<section> <a rel="external" href="#button" id="button" class="button">&#xF011; </a> <span></span> </section>

jquery

$(document).ready(function(){
$('#button').click(function(){
$(this).toggleClass('on');
$('p').toggleClass('hidn');
    $('div[id=container]').toggleClass('container');
    $('p[id=p1]').toggleClass('p1');
});
});

Answer 1

You're toggling the class hidn on all the paragraph tags, including the ones inside your div. But since the ones in the div don't have the class, it's getting added on, making them invisible.

Edit: So either make that paragraph toggle more targeted, or set a rule to make pargraphs with the hidn class in your content div not be invisible.

Answer 2

Add the 'hidn' class to the problematic paragraph since you're toggling it as well due to bad jQuery selectors.

http://jsfiddle.net/baJme/4/

<p id="p1" class="p1 hidn">

However, I'd strongly suggest rewriting the code with proper selectors. Also, follow Arun's advice from the comments about selecting ids.

Answer 3

You're toggling the class hidn on all the paragraph tags, Instead add an unique id to specific <p> tag.Try this:

<p id="p0" class="hidn" style="font-size: 50px;font-family: Razer Header Regular;
top: 20%; color: rgb(192,192,192); position: relative; text-align: center;">

$(document).ready(function(){
$('#button').click(function(){
    $(this).toggleClass('on');
    $('#p0').toggleClass('hidn');
    $('#container').toggleClass('container');
    $('#p1').toggleClass('p1');
});
});