show/hide div inside a show/hide div

Question

I am making a blog sort of website, and when you click on the article header it expands (this works fine). At the bottom of this there is a comment button that expands the comments, im using the same code to do this but its not working. Im new to JQuery so any help would be much appreciated.

JQuery

$(document).ready(function() {
    $('.showArticle').hide();
    $('.articleTitle').show();
    $('.showComments').hide();
    $('.commentTitle').show();
    $('.articleTitle').click(function() {
        $(this).next('.showArticle').slideToggle();
    });
    $('.commentTitle').click(function() {
        $(this).next('.showComments').slideToggle();
    });
});

PHP

for($i=0; $i<5; $i++)
{
print "
<a href='#' class='articleTitle'>Article name[+]</a>
<div class='showArticle'>
Article about some stuff
<br>
<a href='#' class='commentTitle'>comments[+]</a>
<div class='showComments'>
Comments go here 
</div>
</div>

<br>
<br>
";
}

FULL CODE

<!DOCTYPE html>
<?php 
session_start();

print " 
<html>
<head>
<title>Blog</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'>   
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>

$(document).ready(function(){

$('.showArticle').hide();
$('.articleTitle').show();

$('.showComments').hide();
$('.commentTitle').show();

$('.articleTitle').click(function(){
$(this).next('.showArticle').slideToggle();
});



$('.commentTitle').click(function(){
$(this).next('.showComments').slideToggle();

});
});

</script>
</head>



<body>      

<header id='header'>
<div class='innertube'>
<h1>Time to blog </h1>

";

if(!isset($_SESSION['loggedin']))
{
print "You are not signed in";
}
if(isset($_SESSION['loggedin']))
{
print "<p>you are signed in as " . ($_SESSION['name']) . "<p>";
}

print "     
</div>
</header>
";



print "
<!--MAIN BODY-->
<div id='wrapper'>  
<main>
<div id='content'>
<div class='innertube'>
";

for($i=0; $i<5; $i++)
{
print "
<a href='#' class='articleTitle'>Article name</a>
<div class='showArticle'>
Article about some stuff
<br>
<a href='#' class='commentTitle'>comments[+]</a>
<div class='showComments'>
Comment
</div>
</div>

<br>
<br>
";
}


print "     
</div>
</div>
</main>
";  



print "
<nav id='nav'>
<div class='innertube'>
<h3>Pages</h3>

";          
if(!isset($_SESSION['loggedin']))
{
print" <ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Sign in</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
<li><a href='#'>Link 5</a></li>
</ul>";
}
if(isset($_SESSION['loggedin']))
{
print " <ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Sign out</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
<li><a href=''>Link 5</a></li>
</ul> ";
}


</div>
</nav>
</div>



<footer id='footer'>
<div class='innertube'>
<p>Created by JReilly@14412625</p>
</div>
</footer>

</body>
</html>
";
?>

Works fine for me? https://jsfiddle.net/qejz28pj/ 1 Reason it may not work is because you print your HTML try doing it without the `for` loop — Reyno, Mar 03 '16 at 07:55
@theblackgigant loop shouldn't be the problem here at all.. Josh, try to provide more code.. this one you give us should work as you describe it. — Shlizer, Mar 03 '16 at 08:01
The loop is need as this will be generate through a database — josh reilly, Mar 03 '16 at 09:59

Ajai Krishnan R · Answer 1 · 2016-03-03T09:26:20.090

0

Try this, it should work

HTML

-----------------

<a href='#' class='articleTitle'>Article name[+]</a>
<div class='showArticle' style="display:none;">
    Article about some stuff
    <br>
    <a href='#' class='commentTitle'>comments[+]</a>
    <div class='showComments' style="display:none;">
        Comments go here 
    </div>
</div>

Script

-----------------

$(document).ready(function(){
    $('.articleTitle').click(function(){
        $('.showArticle').fadeToggle(200);
    });

    $('.commentTitle').click(function(){
        $('.showComments').fadeToggle(200);
    });
});

edited Mar 03 '16 at 09:26

answered Mar 03 '16 at 09:11

Ajai Krishnan R

135
2
15

what is the problem u r facing with this ? – Ajai Krishnan R Mar 03 '16 at 09:31
The article opens on click but the comments are already shown and clicking on the link ("comment title") it does nothing – josh reilly Mar 03 '16 at 09:49
Thank you but still not working, is it to do with print? or the loop? – josh reilly Mar 03 '16 at 10:13
loop doesn't required, print must be fine... I'm not aware of PHP. – Ajai Krishnan R Mar 03 '16 at 10:15
i will do more research, thank for all the help so far – josh reilly Mar 03 '16 at 10:16
ok, a reboot was all it needed, not sure why but happy to see it working – josh reilly Mar 03 '16 at 12:07

show/hide div inside a show/hide div

1 Answers1