Raul Raul - 2 months ago 8
CSS Question

Trying to forbid <p> tag only till text

I have created a on click toggle function where I control my div. I have a FaQ section where user clicks on one topic and the bottom section appears but My tag is coming accross the whole line rather then just staying to the word..
here is the image of what I am trying to say
enter image description here

I want that when user hovers genral then only the mouse pointer should change where as now even if user takes the mouse to entire line the pointer changes



$(document).ready(function() {
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet 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;
}
.msg_body {
color: black;
}

<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>




Answer

That's because for default p tags are block elements, taking all available space on width. Try adding this:

.msg_head {
  float:left;
  clear:both;
}
.msg_body {
  clear:both;
}