Issue
I have created in Jquery one function to expand and collapse the content of a div. BUt now I would like to make it only with CSS and also use an image of an arrow, like these ones
View Live jsFiddle
I also would like to eliminate all these tag span and keep only the div and it's content
Here the code I have so far.
<div class='showHide'>
<span class='expand'><span id="changeArrow">↑</span>Line expand and collapse</span>
<fieldset id="fdstLorem">Lorem ipsum...</fieldset>
</div>
$(document).ready(function () {
$('.showHide>span').click(function () {
$(this).next().slideToggle("slow");
return false;
});
$(".showHide>span").toggle(function () {
$(this).children("#changeArrow").text("↓");
}, function () {
$(this).children("#changeArrow").text("↑");
});
});
Solution
.fieldsetContainer {
height: 0;
overflow: hidden;
transition: height 400ms linear;
}
#toggle {
display: none;
}
#toggle:checked ~ .fieldsetContainer {
height: 50px;
}
label .arrow-dn { display: inline-block; }
label .arrow-up { display: none; }
#toggle:checked ~ label .arrow-dn { display: none; }
#toggle:checked ~ label .arrow-up { display: inline-block; }
<div class='showHide'>
<input type="checkbox" id="toggle" />
<label for="toggle">
<span class='expand'>
<span class="changeArrow arrow-up">↑</span>
<span class="changeArrow arrow-dn">↓</span>
Line expand and collapse
</span>
</label>
<div class="fieldsetContainer">
<fieldset id="fdstLorem">
Lorem ipsum...
</fieldset>
</div>
</div>
Answered By - dashtinejad
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.