CODEWITHSUNDEEP
javascriptphpjquerycss
Leo Frost
Leo Frost

Reputation: 55

CSS within PHP statement

I am trying to create a number of div's that are responsive to a click event via js. If I use a universal id/class instead of a variable it works but upon clicking every div by the same name responds. Here is the code, much thanks ahead of time!

    <?php
$con=mysqli_connect("host","user","password","database");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql = "SELECT * FROM items";
$result = mysqli_query($con,$sql);


echo "";
while ($row = mysqli_fetch_array($result)) {
    echo "

    <style>


#" . $row['ID'] ." {
    margin-left: 100px;
    margin-top: 0px;
    height:0px;
    width:750px;
    background: rgba(255, 255, 255, 0.3);
    color: rgba(11, 11, 11, 0.8);
    cursor:pointer;
    transition: height 0.5s;
    border-radius: 10px;
    overflow: hidden;  
    box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
  -webkit-transition:box-shadow 1.0s;
    }
#" . $row['ID'] .".csseffect {
    margin-left: 100px;
    margin-top: 5px;
    width: 750px;
    height: 125px;
    }    
#" . $row['item'] ." {
  margin-left: 75px;
  height: 50px;
  width: 800px;
  outline: none;
  font-family : inherit;
  font-size   : 100%;
  background: rgba(255, 255, 255, 1.0);
  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
  -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
  box-sizing: border-box;
  border-radius: 20px;
  padding: 5px;
  border: solid 1px #dcdcdc;
  box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
  -webkit-transition:box-shadow 0.5s;

    }

  </style>



    <div id=\"".$row['ID']."\" class=\"".$row['ID']."\">" . $row['item'] ."<br></div>
    <div id=\"".$row['item']."\" class=\"".$row['item']."\"><br>
    <div class=\"forms\">
Blah blah blah
</div>
<p class=\"pos_fixed\">Some positioned text.</p>
</div><br>

<script>
$(document).ready(function(){  // when the page has loaded in browser...
  $('.".$row['ID']."').click(function(){      // bind a click event to the div element...
    $('.".$row['item']."').toggleClass('csseffect');  // that toggles the   'csseffect' class
  });
});


</script>


";
}
?>

Upvotes: 0

Views: 69

Answers (2)

Turnip
Turnip

Reputation: 36632

You need to use $(this).next('.".$row['item']."') to target the next item that comes after the clicked element in the DOM...

$(document).ready(function(){  // when the page has loaded in browser...
  $('.".$row['ID']."').click(function(){      // bind a click event to the div element...
    $(this).next('.".$row['item']."').toggleClass('csseffect');  // that toggles the   'csseffect' class
  });
});

Upvotes: 1

Chris
Chris

Reputation: 71

What about putting each item group in a div and fire the toggle when the containing div gets clicked instead.

<div class="div_class">    
    <div id=\"".$row['ID']."\" class="id_class">" . $row['item'] ."<br></div>
    <div id=\"".$row['item']."\" class="item_class"><br>
        <div class=\"forms\">
            Blah blah blah
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){  // when the page has loaded in browser...
        $('.div_class').click(function(){
        $(this > .item_class).toggleClass('csseffect');
            //toggle class
        });
     });
</script>

Upvotes: 1

Related Questions