CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Raul
Raul

Reputation: 77

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 <p> tag is coming across 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 general 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;
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>

Upvotes: 0

Views: 82

Answers (2)

casraf
casraf

Reputation: 21694

You could just make a <span> clickable, instead of a <p>. You can wrap it in <p> to keep it in block display.

$(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").on('click', function() {
    $(this).parent().next(".msg_body").slideToggle(100);
  });
  
  console.log($('.msg_head'));
});
.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/1.11.1/jquery.min.js"></script>
<p>
  <span class="msg_head">
    <i class="fa fa-arrow-circle-right" fa-2x></i> 
    General:
  </span>
</p>
<div class="msg_body">
  <p>
    <span class="msg_head" style="margin-left: 4em;">
      <i class="fa fa-arrow-circle-right" fa-2x></i>
      sub question one of genral category
    </span>
  </p>
  <div class="msg_body" style="margin-left: 4em;">
    answer to  sub question one of genral category
  </div>
</div>

Upvotes: 0

DaniP
DaniP

Reputation: 38262

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

Upvotes: 2

Related Questions