My toggle function is not working correctly in my FaQ section. When a user clicks on a topic, the bottom section should appear, but the <p> tag is being displayed across the entire line instead of just one word..
Here is an image to help illustrate my issue:
https://i.sstatic.net/uO80C.png
I want the mouse pointer to only change when hovering over the word "general," rather than the entire line.
$(document).ready(function() {
//hide all elements with class msg_body
$(".msg_body").hide();
//toggle the component with class msg_body
$(".msg_head").click(function() {
$(this).next(".msg_body").slideToggle(100);
});
});.msg_head {
cursor: pointer;
cursor: hand;
font-size: 20px;
text-decoration: underline;
color: red;
float:left;
clear:both;
}
.msg_body {
color: black;
clear:both;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="msg_head"><i class="fa fa-arrow-circle-right" fa-2x></i> <span>General:</span>
</p>
<div class="msg_body">
<p class="msg_head" style="margin-left: 4em;"><i class="fa fa-arrow-circle-right" fa-2x></i> sub question one of genral category</p>
<div class="msg_body" style="margin-left: 4em;">
answer to sub question one of genral category
</div>