CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Julian
Julian

Reputation: 657

Making a DIV display none or block depending on the URL (GET)

I would like to make a system where a user click a page number and the div with the page ID as its ID displays block whilst the rest displays none.

Here is what code I have already:

<script type="text/javascript">
//initialize page divs
$('#page-1').css('display', 'none');
$('#page-2').css('display', 'none');
</script>
<?php
if(isset($_GET['page'])){
    $page = $_GET['page']; ?>
    <script type="text/javascript">
        $('#page-<?php echo $page; ?>').css('display', 'block');
    </script><?php
} else {
    $page = "1"; ?>
    <script>
        $('#page-<?php echo $page; ?>').css('display', 'block');
    </script><?php
}
?>

And the div is echo'd out in a foreach loop with the array_chunk() function. Here is the div in it's form before echo'ing out:

<?php
    $page_num = '0';
    foreach (array_chunk($articles, 9, true) as $pre_array) {
        $page_num = $page_num +1;
        $div_id = "<div id=\"article-page\" class=\"page-". $page_num ."\">";
        echo $div_id;
        foreach (array_chunk($pre_array, 3, true) as $array){
        echo '<div class="section group">';
        foreach ($array as $article) { ?>
                <div class="col span_1_of_3"><a href="article.php?id=<?php echo $article['article_id']; ?>"><?php echo $article['article_title']; ?></a><br /> <?php $article_content = $article['article_content']; if(strlen($article_content)<30) { echo $article_content; } else { echo("" . substr($article_content, 0, 30) . "..."); }?><br /><small>Posted <?php echo date('l dS F Y', $article['article_timestamp']); ?></small></div>
            <?php }
        echo '</div>';
        }
        echo '</div>';
    } ?>

End result for example would be

<div id="article-page page-1">

I have tried using inline styles and getting JS to change it, I have also used php if statements then use html inside the statement to get the style tags to change it.

NO LUCK... Help please.

Upvotes: 0

Views: 1602

Answers (2)

Pupil
Pupil

Reputation: 23978

The id should not contain spaces.

As an HTML element can have only one id, but,

it can have multiple classes separated by spaces.

But, class can have.

Thus:

<div id=\"article-page page-". $page_num ."\">

Change it to

<div id=\"article-page" class=\"page-". $page_num ."\">

And make changes accordingly, it must work.

Refer the corrected code below:

<script type="text/javascript">
//initialize page divs
$('.page-1').css('display', 'none');
$('.page-2').css('display', 'none');
</script>
<?php
$page = (isset($_GET['page'])) ? $_GET['page'] : 1;
?>
<script type="text/javascript">
  $('.page-<?php echo $page; ?>').css('display', 'block');
</script>

EDIT:

<script type="text/javascript">
$(function(){
  $('.page-<?php echo $page; ?>').css('display', 'block');
});
</script>

Upvotes: 1

roullie
roullie

Reputation: 2820

your ID is containing a space, try using a class instead. or you can use that and call that in your jQuery as $('#article-page page-". $page_num ."').css(......)

Upvotes: 0

Related Questions