I am facing an issue while using .slideDown() with multiple classes. I want only one class to toggle/dropdown at a time, but currently when I press the button, all classes show up instead of just the one I want to display. How can I achieve this?
Here is my HTML:
<!DOCTYPE HTML>
<head>
<title>Ricoz.co.uk Rp Directory</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script rel="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<div class="navbar"></div>
<div class="char">
<div class="picture"></div>
<div class="text">
Here is some text!</div>
<button>test</button>
</div>
<div class="char">
<div class="picture"></div>
<div class="text">
Here is some text!</div>
<button>test</button>
</div>
</body>
My CSS:
body{
background-image: url(tb.jpg);
margin: 0;
}
.navbar{
border: 1px solid black;
height: 50px;
}
.row{
height: 440px;
}
.char{
background-color: white;
width: 200px;
margin: 20px;
float: left;
}
.char > .picture{
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 200px;
}
.text{
width: 200px;
height: 150px;
}
JavaScript/JQuery:
$(document).ready(function(){
$('.text').hide();
$("button").click(function(){
$(this).prev(".text").slideToggle();
});
});
Thank you for your time!