CODEWITHSUNDEEP
jqueryhtmlcss
Stephan Mallmann
Stephan Mallmann

Reputation: 1

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

Upvotes: 0

Views: 2815

Answers (5)

Stephan Mallmann
Stephan Mallmann

Reputation: 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

Upvotes: -1

Stephan Mallmann
Stephan Mallmann

Reputation: 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.

Upvotes: -1

delinear
delinear

Reputation: 2805

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

Upvotes: 1

Vimal Santoki
Vimal Santoki

Reputation: 31

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

Upvotes: 1

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

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>

Upvotes: 1

Related Questions