Menu
I have a jQuery slideToggle that I am using to display and hide certain content. It always show an arrow pointing down, but if clicked and the text is shown, the arrow should be pointing up. Anyway to do this?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
<button>↓</button>
<p>Wow!</p>
</body>
</html>
603
As simple as that!
var toggled = false;
$("button").click(function() {
if (!toggled) {
$(this).html("↑");
toggled = true;
} else {
$(this).html("↓");
toggled = false;
}
$("p").slideToggle();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
↓
</button>
<p>
Wow!
</p>Working Demo
$(document).ready(function() {
$("button").click(function() {
$("p").slideToggle();
$(this).toggleClass('down up');
});
});.down {
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
height: 130px;
width: 130px;
}
.up {
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png");
height: 130px;
width: 130px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="down"></button>
<p>Wow!</p>Try something like this.. :)
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
$( this ).text('NewButtonText');
});
});
This solutions checks if the button has an arrow pointing 'UP', if it does, replaces it with 'DOWN', and vice versa.
$(document).ready(function(){
$("button").click(function(){
if ($(this).text() == 'up'){
$(this).html('↓')
}else{
$(this).html('up');
}
$("p").slideToggle();
});
});
https://jsfiddle.net/gogaa33d/
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
