toggle pseudo class :active with css/jquery

Question

i have a little css problem. There is a div which is only display an image of an help mark. What i try is on clicking on this image the next div on the same level is display:inline-block. On a second click it is display:none again.

The display:inline-block on :active is working but it is not toggle.

There is JQuery:

(function($) {

// Execute after the page was fully 
setTimeout( function(){
if ($('#jsonPayload').length) {
// scope to JSD 
var banner = jQuery('<div class="helpmark">'                  
+ '<img class="emoticon" align="adsmiddle" src="@contextPath/plugins/cute/static/resource/SD-CGM-TT/help_16.gif" />'
+ ' @message' 
+   '</div>');
banner.insertBefore('div.description'); 
}
}, 1)
})(jQuery);

And the HTML around the Elements we are looking for

<div class="helpmark">
    <img class="emoticon" src="http://*********/plugins/cute/static/resource/SD-CGM-TT/help_16.gif"> </div>
<div class="description">
    <p>Hier können Sie einen kurzen Betreff einfügen</p>
</div>

by clicking on .helpmark .description is displayed

And the CSS i have

.helpmark {
    cursor: pointer;
    display: inline-block;
    margin-top: 5px;
}

.helpmark:active + .description {
    display: inline-block;
}

.description {
    display: none;
}

I hope anybody can help me.

Best regards, Stephan

It is not directly possible, an ideal approach is to use an additional class that has the properties you want, and then toggle that class instead. See stackoverflow.com/questions/25470641/… — Kushal
– Kushal, Commented Dec 4, 2017 at 9:57
Try using checkbox to get the behavior you are looking for! .....jsfiddle.net/codename0/pmufnvk2 — Chiller
– Chiller, Commented Dec 4, 2017 at 9:58

delinear · Accepted Answer · 2017-12-04 10:17:44Z

1

You can use .toggleClass() to add/remove an active class on your .helpmark element, and then add some CSS to show/hide the sibling based on that class, like so:

CSS:

.helpmark.active + .description {
  display: inline-block;
}
.description {
  display: none;
}

jQuery:

// Execute after the page was fully 
setTimeout( function(){
if ($('#jsonPayload').length) {
// scope to JSD 
var banner = jQuery('<div class="helpmark">'                  
+ '<img class="emoticon" align="adsmiddle" src="@contextPath/plugins/cute/static/resource/SD-CGM-TT/help_16.gif" />'
+ ' @message' 
+   '</div>');
banner.insertBefore('div.description'); 

  // Add this part to your script:
  banner.on('click',function() {
    $(this).toggleClass('active');
  });

}
}, 1)
})(jQuery);

Here's a Codepen example

answered Dec 4, 2017 at 10:17

delinear

2,8251 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephan Mallmann Over a year ago

Hi, thank you for the answer. It works only on first element of the page. I have more entry's where this code is executed How can i add attachments to show it?

Pons Purushothaman · Accepted Answer · 2017-12-04 10:01:20Z

1

It is simple with jquery, Try the below code.

$('.helpmark').click(function(){
  $('.description').toggle();
});

.helpmark{
  width: 30px;
  height: 30px;
  background: red;
}
.description{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="helpmark"> </div>
<div class="description">
    <p>Hier können Sie einen kurzen Betreff einfügen</p>
</div>

answered Dec 4, 2017 at 10:01

Pons Purushothaman

2,2791 gold badge16 silver badges23 bronze badges

2 Comments

Stephan Mallmann Over a year ago

Hello and thank's for the quick answer. It is not that simple because i can only add new elements with jquery and not manipluate a existing. .discription is a existing.

Stephan Mallmann Over a year ago

Or... where i have to add your code in my code above? Sorry I'm normally not a web designer or something like that

Vimal Santoki · Accepted Answer · 2017-12-04 10:11:53Z

$(".tab_button").click(function(){
	$(".tab_description").slideToggle();
});

.tab_button{
  background: #990000 none repeat scroll 0 0;
    cursor: pointer;
    height: 30px;
    width: 40px;
}
.tab_description{
  	border: 1px solid #000000;
    display: none;
    max-width: 500px;
    padding: 15px;
    text-align: justify; 
}
.tab_description p{
	margin:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab_button"> </div>
<div class="tab_description">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis massa nec odio rutrum, eget luctus metus vestibulum. Aliquam id volutpat eros, sit amet imperdiet risus. Vivamus a nisi enim. Curabitur accumsan rutrum egestas. Morbi orci purus, vehicula non risus ac, auctor tincidunt tortor. Vivamus felis lectus, scelerisque sed turpis vel, aliquet vehicula tellus. Vestibulum sit amet lorem sodales, malesuada purus a, dapibus turpis. Phasellus imperdiet eros leo, sit amet sollicitudin neque sodales non. </p>
</div>

Stephan Mallmann · Accepted Answer · 2017-12-04 11:16:37Z

-1

It is a little bit frustrating to see that there are many good answers but when i add a comment because there is a little problem nobody is reading it.

I'm an absolute newbie with scripting and I'm sorry to need a little more help then you normal expected.

answered Dec 4, 2017 at 11:16

Stephan Mallmann

11 silver badge2 bronze badges

Comments

Stephan Mallmann · Accepted Answer · 2017-12-04 11:33:59Z

-1

// code 
(function($) {
// Execute after the page was fully 
setTimeout( function(){
if ($('#jsonPayload').length) {
// scope to JSD 
var banner = jQuery('<div class="helpmark">'
+ '<img class="emoticon" align="adsmiddle" src="@contextPath/plugins/cute/static/resource/SD-CGM-TT/help_16.gif" />'
+ ' @message'
+   '</div>');
banner.insertBefore('div.description'); 
$('.helpmark').click(function(){
  $(this).next('.description').toggle();
});
}
}, 1)
})(jQuery);

That fix it for me

answered Dec 4, 2017 at 11:33

Stephan Mallmann

11 silver badge2 bronze badges

1 Comment

Stephan Mallmann Over a year ago

fail. It work only 1 time After relead the page again it doen't work. wierd

Collectives™ on Stack Overflow

toggle pseudo class :active with css/jquery

5 Answers 5

1 Comment

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related