CODEWITHSUNDEEP
jquery
Gallex
Gallex

Reputation: 321

jquery: change css if header is clicked

i would like to add one more thing to my code. right now i have styled h3 like this:

h3:before {
font-family: 'ElegantIcons';
content: "\35";
float:left;
}

i would like to change this line content: "\35"; to content: "\38"; when header is clicked and content is opened.

html:

<h3>PS elementum justo ligula</h3>
<div>elementum justo ligula, interdum scelerisque.
<button>Close</button>
</div>

jquery:

$("h3").click(function () {
$(this).next("div").slideToggle("slow");
});

Upvotes: 0

Views: 209

Answers (2)

manpreet
manpreet

Reputation: 665

Another way is to use content: css as the some attribute value of that element.

Changes Made

  1. Added attribute show-content to the element
    <h3 show-content="35">PS elementum justo ligula</h3>

  2. changed content css to
    content: attr(show-content);

  3. changed js to update this custom attribute on click
    $(this).attr('show-content','38');

JS Fiddle Link: http://jsfiddle.net/mpsingh2003/bc60n7sy/

Upvotes: 2

Cranio
Cranio

Reputation: 9847

Change class instead.

h3:before {
font-family: 'ElegantIcons';
content: "\35";
float:left;
}

h3.alt:before {
font-family: 'ElegantIcons';
content: "\38";
float:left;
}

JS:

$("h3").click(function () {
$(this).addClass("alt");
$(this).next("div").slideToggle("slow");
});

Upvotes: 1

Related Questions