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

Question

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.

Who and why did vote down for this question?

SaidbakR
– SaidbakR

2014-11-26 06:49:19 +00:00
Commented Nov 26, 2014 at 6:49 — SaidbakR
– SaidbakR, Commented Nov 26, 2014 at 6:49

Pupil · Accepted Answer · 2014-11-26 06:44:40Z

1

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>

edited Nov 26, 2014 at 6:44

answered Nov 26, 2014 at 6:16

Pupil

24k6 gold badges50 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Julian Over a year ago

Unfortunately that isn't working, I'm confused as this should work

Pupil Over a year ago

It must work. Please share your HTML where you are printing these two divs.

Julian Over a year ago

I have just added it in to the question, see snippet 2.

Pupil Over a year ago

Try update $div_id = "<div id=\"article-page\" class=\"page-". $page_num ."\">"; to $div_id = '<div id="article-page" class="page-'. $page_num .'">';

Pupil Over a year ago

Let us continue this discussion in chat.

roullie · Accepted Answer · 2014-11-26 06:18:33Z

0

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(......)

answered Nov 26, 2014 at 6:18

roullie

2,82019 silver badges26 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related