CODEWITHSUNDEEP
phpjavascriptjquerycssajax
cocksparrer
cocksparrer

Reputation: 219

Show and Hide DIV Class from different page file

I have two different PHP files:

  1. index.php
  2. show.php

-

index.php

<ul>
<li><a href="show.php?id=1">Show Div 1</a></li>
<li><a href="show.php?id=2">Show Div 2</a></li>
<li><a href="show.php?id=3">Show Div 3</a></li>
</ul>

-

show.php

<style type="text/css">
.div1 {display:none;}
.div2 {display:none;}
.div3 {display:none;}
</style>

<div class="div1">Div 1 Content</div>
<div class="div2">Div 2 Content</div>
<div class="div3">Div 3 Content</div>

-

When you read the css style in the show.php, there are no content will be displayed.

If user click which one of <li> from index.php, user can only see the .div on show.php which that <li> clicked from the index.php.

I assuming this method will make less files. (exactly like what I'm wondering)

Because all contents in which to be shown, are in one file (show.php).

Well, how to make each <li> from index.php will only show the content from each div in show.php.

Upvotes: 0

Views: 1523

Answers (4)

user2656702
user2656702

Reputation: 1

index.php:

<ul>
<li><a href="show.php?id=1">Show Div 1</a></li>
<li><a href="show.php?id=2">Show Div 2</a></li>
<li><a href="show.php?id=3">Show Div 3</a></li>
</ul>

show.php:

<style type="text/css">
.hidden {display:none;}
.display {display: block;}
</style>
<div class="<?php if(!isset($_GET['id'])||$_GET['id']==1) echo 'display'; else echo 'hidden'; ?>">Div 1 Content (default)</div>
<div class="<?php if(isset($_GET['id'])&&$_GET['id']==2) echo 'display'; else echo 'hidden'; ?>">Div 2 Content</div>
<div class="<?php if(isset($_GET['id'])&&$_GET['id']==3) echo 'display'; else echo 'hidden'; ?>">Div 3 Content</div>

Upvotes: 0

ElmoVanKielmo
ElmoVanKielmo

Reputation: 11316

This is a bad approach - you should send only relevant content in response - not a bunch of hidden divs.

Edited after comment from @Styphon.

show.php

<div>
<?php
    $id = isset($_GET['id']) ? $_GET['id'] : 0;
    if($id == "1"){
        echo "Div 1 Content";
    }
    else if ($id == "2"){
        echo "Div 2 Content";
    }
    else if ($id == "3"){
        echo "Div 3 Content";
    }
    else{
        echo "Default content";
    }
?>
</div>

After comments arguing that, this is a better approach but doesn't answer the original question. Please read https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem
This question is an example of XY problem.

Upvotes: 0

Styphon
Styphon

Reputation: 10447

You want this in show.php

<?php $id = isset($_GET['id']) ? $_GET['id'] : 0; ?>
<style type="text/css">
.div1, .div2, .div3 {display: none}
<?php if($id == 1) {
    echo '.div1 {display: block; }';
} elseif($id == 2) {
    echo '.div2 {display: block; }';
} elseif($id == 3) {
    echo '.div3 {display: block; }';
}
</style>

<div class="div1">Div 1 Content</div>
<div class="div2">Div 2 Content</div>
<div class="div3">Div 3 Content</div>

Upvotes: 1

Tim Wasson
Tim Wasson

Reputation: 3656

Something like this should work, but keep in mind this is sort of a "hack". There's better ways to accomplish this, but they'd fall outside of the scope of your question.

index.php:

<ul>
<li><a href="show.php?id=1">Show Div 1</a></li>
<li><a href="show.php?id=2">Show Div 2</a></li>
<li><a href="show.php?id=3">Show Div 3</a></li>
</ul>

show.php:

<style type="text/css">
.div1 {display:none;}
.div2 {display:none;}
.div3 {display:none;}

<? if($_GET['id']==1) { echo ".div1 {display:block;" } ?>
<? if($_GET['id']==2) { echo ".div2 {display:block;" } ?>
<? if($_GET['id']==3) { echo ".div3 {display:block;" } ?>
</style>
<div class="div1">Div 1 Content</div>
<div class="div2">Div 2 Content</div>
<div class="div3">Div 3 Content</div>

Upvotes: 0

Related Questions