How to make DIV constantly display text on click?


Tags: html,css

Problem :

I want a way (ideally just using CSS HTML) where when I click on Question, the text shows and remains there. Then if they click on text again, it will revert back to question.

It works on hover, but I don't know how to make it on click. HTML:

<div id="packagequestioninfo">
  <p class="packagereplies">Question</p>
  <p class="packagecomment">If you require <b>hosting</b> for your website, select your primary website and go to <b>Part II</b>. If you do not require hosting, please Checkout below. </p>
</div>

CSS:

#packagequestioninfo {
padding: 10px;
background: #F2F7FA;
border-radius: 0px;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
}

#packagequestioninfo:hover {
background-image:url(../img/index/body/ourproducts/light_blue_background_pattern.jpg);
background-repeat:repeat;
cursor: none;
}

#packagequestioninfo .packagecomment {
display: none;

}

#packagequestioninfo:hover .packagereplies {
display: none;
}   
#packagequestioninfo:hover .packagecomment {
display: inline;
}

Here is the code http://jsfiddle.net/53UK2/



Solution :

Make .packagecomment invinsible with css, then use jQuery:

$('p').click(function(){
     $('p').toggle();
});

Fiddle: http://fiddle.jshell.net/RcTGN/


    CSS Howto..

    How to set incremental CSS classes in each Table Cell with jQuery?

    How to keep css background image blurred inside a container?

    How to center an element based on the parent div?

    How can I make my icon
    s show up next to each other, rather than underneath each other?

    How to fit a list of images in an HTML div to form a 2D grid?

    How to remove/ignore :hover css style on touch devices

    How to center text over an image in a table using javascript, css, and/or html?

    How do I make a class/div behave like it were floating?

    How to override inline CSS without using !important or javascript?

    How to position element between two sections while also being responsive?

    How do I center numbers in a table from Google Visualization API?

    How to disable css Animation keyframes in opera?

    show/hide slider toggle for any number of IDs

    How to add an icon to a button at the bottom right corner

    TD Borders from a table, not showing in IE8 [duplicate]

    How To Put Values Dynamically

    How to make a header ribbon responsive

    How to apply “-webkit” css rules using jquery .css

    How should a graphic designer learn web design? [closed]

    How to apply css for a class within h2?

    How can I modify my four quadrants to allow some “breathing room” between them (HTML/CSS)?

    How to display .toggle or .Animate to all connected browser sessions using Meteor

    How can I mimic Leaflet.Draw tooltip style with a different tooltip plugin?

    LESS: How to specify current tag with nesting?

    How to calculate CSS letter-spacing v.s. “tracking” in typography?

    How to add left border with image(s) dynamically

    How find all elements with a specific css property in a div and add a class to div

    How to convert CSS class to id?

    How to implement fluid font size using pure CSS

    how the rises up and down button is made?