0

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

Stephan Mallmann
  • 1
  • 2
  • 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 https://stackoverflow.com/questions/25470641/toggle-a-pseudo-element-using-jquery – Kushal Dec 04 '17 at 09:57
  • Try using checkbox to get the behavior you are looking for! .....https://jsfiddle.net/codename0/pmufnvk2/ – Chiller Dec 04 '17 at 09:58

5 Answers5

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>
Pons Purushothaman
  • 2,225
  • 1
  • 14
  • 23
  • 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 Dec 04 '17 at 10:06
  • Or... where i have to add your code in my code above? Sorry I'm normally not a web designer or something like that – Stephan Mallmann Dec 04 '17 at 10:10
1

$(".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>
Vimal Santoki
  • 31
  • 2
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

delinear
  • 2,745
  • 1
  • 10
  • 21
  • 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? – Stephan Mallmann Dec 04 '17 at 10:30
-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.

Stephan Mallmann
  • 1
  • 2
-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

Stephan Mallmann
  • 1
  • 2