Toggle Pseudo Class :active With Css/jquery

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

Solution 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

Solution 2:

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>

Solution 3:

$(".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>

Solution 4:

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.

Solution 5:

// 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