Get contents of a div infront of another div it contain - php

Question

When see more button is clicked, second passage shows but there is a gap in between them as per shown in the screenshot. I want the second passages to continue with first one
function ClickParent(ClickElem,ElemFind)
{
$("."+ClickElem).click(function() {
var GetGrp = $(this).parents(".group");
GetGrp.find("."+ElemFind).fadeToggle();
});
}
// Find one level
ClickParent('name','moreinfo');
// Find another level
ClickParent('moreinfo','evenmore');
<div class="group">
How are you?
<div class="moreinfo" style="display: none;">
Fine
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
How to get result from How are you?? Fine answer should be next to the question with no space.

Answer 1

I get now what you want for your project. You wanted a "Read more" function for your articles.
Using <div></div> to hide your continued text/string causes a new line. You can just replace it with <font></font>.
<!-- FIRST ARTICLE -->
<div class="group">
This is the first article that would
<font class="evenmore" style="display: none;">
show more information about this first article.
</font>
<div class="moreinfo">
See more
</div>
</div>
<!-- SECOND ARTICLE -->
<div class="group">
This is the second article that would
<font class="evenmore" style="display: none;">
show more information about this second article.
</font>
<div class="moreinfo">
See more
</div>
</div>
Then let us create a script that when "See more" is clicked, it will hide this "See more" and would show the content inside <font></font>.
$(document).ready(function(){
$(".moreinfo").click(function(){ /* WHEN SEE MORE IS CLICKED */
var elem = $(this);
$(this).fadeOut(200).hide(); /* HIDE THE CLICKED SEE MORE */
elem.closest("div.group").find('font.evenmore').fadeIn(200).show(); /* SHOW THE CONTENT OF THE CLOSEST FONT */
});
});
Here is a fiddle. But if you want to hide the shown details, we can add a "Show Less". Check this second fiddle.