How can I create a DIV element that consistently shows text when clicked?

Question

How can I create a DIV element that consistently shows text when clicked?

Is there a way to achieve this effect using just CSS and HTML? When clicking on the question text, it should reveal the answer below, and clicking again should hide the answer.

I have managed to make it work with hover, but I am unsure how to implement it for click interactions. Here is the current HTML code:

<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;
}

You can view the code on this JSFiddle link.

html css

Answer 1

Answer №1

Hide the .packagecomment element using CSS and then create a jQuery function:

$('button').click(function(){
     $('div').toggle();
});

Check out the demo: http://fiddle.jshell.net/ABC123/

Answer 2

Hide the .packagecomment element using CSS and then create a jQuery function:

$('button').click(function(){
     $('div').toggle();
});

Check out the demo: http://fiddle.jshell.net/ABC123/

Answer 3

Answer №2

To achieve this without requiring support for IE8 and earlier versions, you can utilize pure CSS as demonstrated in this example. This approach leverages the ":checked" css selector. For more information on browser support, refer to this resource.

Here is the HTML structure:

<div class="question">
    <input type="checkbox" class="qestion-checkbox" id="q1" />
    <label for="q1" class="qestion-text">Question 1 text</label>
    <label for="q1" class="qestion-answer">Question 1 answer</label>
</div>
<div class="question">
    <input type="checkbox" class="qestion-checkbox" id="q2" />
    <label for="q2" class="qestion-text">Question 2 text</label>
    <label for="q2" class="qestion-answer">Question 2 answer</label>
</div>

Below is the associated CSS code:

.qestion-answer, .qestion-checkbox {
    display: none;
}
.qestion-checkbox:checked + .qestion-text {
    display:none;
}
.qestion-checkbox:checked + .qestion-text + .qestion-answer {
    display:block;
}

If you require support for IE8 and older browsers, you will need to incorporate some javascript/jQuery into your solution.

Answer 4

To achieve this without requiring support for IE8 and earlier versions, you can utilize pure CSS as demonstrated in this example. This approach leverages the ":checked" css selector. For more information on browser support, refer to this resource.

Here is the HTML structure:

<div class="question">
    <input type="checkbox" class="qestion-checkbox" id="q1" />
    <label for="q1" class="qestion-text">Question 1 text</label>
    <label for="q1" class="qestion-answer">Question 1 answer</label>
</div>
<div class="question">
    <input type="checkbox" class="qestion-checkbox" id="q2" />
    <label for="q2" class="qestion-text">Question 2 text</label>
    <label for="q2" class="qestion-answer">Question 2 answer</label>
</div>

Below is the associated CSS code:

.qestion-answer, .qestion-checkbox {
    display: none;
}
.qestion-checkbox:checked + .qestion-text {
    display:none;
}
.qestion-checkbox:checked + .qestion-text + .qestion-answer {
    display:block;
}

If you require support for IE8 and older browsers, you will need to incorporate some javascript/jQuery into your solution.

Answer 5

Answer №3

Using only CSS, achieving this is not possible. You could potentially switch from using :hover to :active, but that would require holding down the mouse button for it to work. Take a look at an example.

Have you considered using jQuery instead? It might make things easier.

Answer 6

Using only CSS, achieving this is not possible. You could potentially switch from using :hover to :active, but that would require holding down the mouse button for it to work. Take a look at an example.

Have you considered using jQuery instead? It might make things easier.

Answer 7

Answer №4

Here is a non-jQuery way to show and hide content by changing the display style attribute:

HTML:

<script src="javascriptfile.js"></script>
<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>

Javascriptfile.js:

// Wait for all window elements to load
window.onload = function() {
  document.addEventListener('packagequestioninfo').addEventListener('onclick', function() {

    if(document.getElementById('packagecomment').style.display !== 'none') {

      document.getElementById('packagecomment').style.display = 'none';

    } else {

      document.getElementById('packagecomment').style.display = 'block';

    }

  });
}

If you prefer the class toggling method:

window.onload = function() {
  document.addEventListener('packagequestioninfo').addEventListener('onclick', function()     {

    if(document.getElementById('packagecomment').className.indexOf('show')) {

      document.getElementById('packagecomment').className = '';

    } else {

      document.getElementById('packagecomment').className = 'show';

    }
  });
}

In this approach, make sure to add a 'show' class to your CSS:

.show{
  display:block;
}

Answer 8

Here is a non-jQuery way to show and hide content by changing the display style attribute:

HTML:

<script src="javascriptfile.js"></script>
<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>

Javascriptfile.js:

// Wait for all window elements to load
window.onload = function() {
  document.addEventListener('packagequestioninfo').addEventListener('onclick', function() {

    if(document.getElementById('packagecomment').style.display !== 'none') {

      document.getElementById('packagecomment').style.display = 'none';

    } else {

      document.getElementById('packagecomment').style.display = 'block';

    }

  });
}

If you prefer the class toggling method:

window.onload = function() {
  document.addEventListener('packagequestioninfo').addEventListener('onclick', function()     {

    if(document.getElementById('packagecomment').className.indexOf('show')) {

      document.getElementById('packagecomment').className = '';

    } else {

      document.getElementById('packagecomment').className = 'show';

    }
  });
}

In this approach, make sure to add a 'show' class to your CSS:

.show{
  display:block;
}

How can I create a DIV element that consistently shows text when clicked?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Discover the job specifications pages on Dice.Com by utilizing C programming language

Transform text that represents a numerical value in any base into an actual number

The previous link is still present in the current URL

Tips for positioning a div at the bottom using Bootstrap

Unable to Retrieve HTML Element by TagName using VB

Managing selected ticket IDs in a table with AngularJS

Tips for customizing the appearance of path elements within an external SVG file being utilized as a background image

Can floating elements be disregarded by block elements?

The active tabs or placeholders do not update properly when I click on them

Jquery Menu featuring subitems aligned to the right

How can I alter the background color while performing a transformation in JS/CSS?

How to Utilize USB Devices with Node-Webkit?

Choose and manipulate a set of elements using Jquery

What could be the reason for the malfunction of the min value in my Material UI date textfield?

Display the form-control field only when a selection has been made in the previous form-control using HTML and PHP

Mobile Size Setting

Is it possible to link an HTML select element to a changing array in JavaScript?

Using JQuery to Load Text Content from Textarea into an IFrame

How to keep jQuery horizontal submenu open when clicking on the menu

What could be the reason for the lack of response from the jquery element on an