Question

Hello StackOverflow Community, I hope you guys can help me with this here:

On my homepage I have a DIV structure that basically have a <div id="container"> that has an <h1> and a <div id="content">.

I also have some JavaScript that makes the <div id="content"> slide up/down when the <h1> is clicked, by inserting or removing a class “.open” to the <div id="content">.

Now I want to create using PHP and conditional that echo something if the <div id="content"> has the class “.open” and something else if not.

This is what i was trying to do:

There is a Javascript like this:

            <script type="text/javascript">
                  $(function() {
                        $('.container h1').bind('click', function() {
                            if ($(this).parent().hasClass('open')) {
                                $(this).parent().find('.content').slideUp();
                                $(this).parent().removeClass('open');
                                return 0;
                            }
                            $(this).parent().parent().find('.content').slideUp();
                            $(this).parent().find('.content').slideDown();
                            $(this).parent().addClass('open');
                        })
                     });
            </script>

That works on this:

            <div id="container">
                <h1><a href="javascript:void(null)">Open the content</a></h1>
                <div id="content">
                    <p>Content 1</p>
                </div>  
            </div>      
            <div id="container">
                <h1><a href="javascript:void(null)">Open the content</a></h1>
                <div id="content">
                    <p>Content 2</p>
                </div>  
            </div>     

It works just fine until here. Now i want to create an condition with PHP that echo something when any has have the class .open but I cant figure out how to write this one. Here is what i came up with:

            <? if '#content'.class='open'{
                  echo include('column-right1.php'); 
                  echo include('column-right2.php'); 
                }
                else {
                  echo include('column-right3.php');  
                {
            ?>

If this isnt possible in PHP how would be the script on javaScript and/or Jquery for it?

Answer 1

If it were me I would use jquery and do something like this:

1. give an id to div where you’re appending “.aberto” like id=”content” class=”content aberto”
2. Check if the class exists
3. Load the php file you want

if ($('#content').hasClass('aberto')) {
   $("#some_div_id").load('column-right1.php');
   $("#other_div_id").load('column-right2.php');
}else{
   $("#else_div_id").load('column-right3.php');
}

Adapt it and try it 😉

You should start by including a file in your index.php right before closing the tag … something like:

<script type="text/javascript" src="http://www.daterraweb.com/js/onload.js"></script>

Then in file onload.js you place the code mentioned above… like

$(document).ready(function(){
 if ($('#content').hasClass('aberto')) {
       $("#some_div_id").load('column-right1.php');
       $("#other_div_id").load('column-right2.php');
    }else{
       $("#else_div_id").load('column-right3.php');
    }
}

1. You should be carefull with the paths for php files
2. You should have all the important divs with the id desired and match it with the jquery code.

NOTE: If you want to load the content right after you insert the .open class you should simply change to something like this:

       <script type="text/javascript">
              $(function() {
                    $('.container h1').bind('click', function() {
                        if ($(this).parent().hasClass('open')) {
                            $(this).parent().find('.content').slideUp();
                            $(this).parent().removeClass('open');
                            $("#else_div_id").load('column-right3.php');
                            return 0;
                        }
                        $(this).parent().parent().find('.content').slideUp();
                        $(this).parent().find('.content').slideDown();
                        $(this).parent().addClass('open');
                        $("#some_div_id").load('column-right1.php');
                        $("#other_div_id").load('column-right2.php');
                    })
                 });
        </script>