L. Dan L. Dan - 5 months ago 18
jQuery Question

jQuery Expand Collapse List with php/MySQi

Can you help me with my code of category and subcategory programmed in php mysqli and jQuery.

this is my code.

index.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Expand Collapse List Item </title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<?php
$mysqli=mysqli_connect('localhost','root','','category');
$sql="SELECT * FROM categor WHERE parent_id = 0";
$result=mysqli_query($mysqli,$sql) or die(mysqli_error());
while($row=mysqli_fetch_array($result)){
$cat_id=$row['cat_id'];
$cat_name=$row['cat_name'];
echo"<ul>";
echo "<li class='category'><a href='index.php?cat=$cat_id'>".$cat_name."</a>";

echo "<ul>";
$sql2="SELECT * FROM categor WHERE parent_id=$cat_id and cat_id<>0";
$result2=mysqli_query($mysqli,$sql2) or die(mysqli_error());

while($row=mysqli_fetch_array($result2)){
$sub_cat_id=$row['cat_id'];
$sub_cat_name=$row['cat_name'];
echo "<li><a href='index.php?cat=$sub_cat_id'>".$sub_cat_name."</a></li>";
}
echo "</ul>";
echo "</li>";
echo"</ul>";

}
?>

</body>
</html>


this is my code script.js

$(document).ready(function() {
$('li.category').addClass('plusimageapply');
$('li.category').children().addClass('selectedimage');
$('li.category').children().hide();
$('li.category').each(
function(column) {
$(this).click(function(event){
if (this == event.target) {
if($(this).is('.plusimageapply')) {
$(this).children().show();
$(this).removeClass('plusimageapply');
$(this).addClass('minusimageapply');
}
else
{
$(this).children().hide();
$(this).removeClass('minusimageapply');
$(this).addClass('plusimageapply');
}
}
});
}
);
});


this is my code style.css

@charset "utf-8";

.plusimageapply {
list-style-image:url(../img/plus.png);
cursor:pointer;
}
.minusimageapply {
list-style-image:url(../img/minus.png);
cursor:pointer;
}

.selectedimage {
list-style-image:url(../img/selected.png);
cursor:pointer;
}


I have two problems...
The first is that by adding a link to the category (
echo "<li><a href='index.php?cat=$sub_cat_id'>".$sub_cat_name."</a>
) when viewing in the browser does not show me the link text.

the second problem:

Is I want to alone pressing the the button + and not pressing the category of the link, that pressing the button + display the contents of the subcategory

Answer

It reviews this article will help much expand

$(document).ready(function() {
$('li.category').addClass('plusimageapply');
$('li.category').children().addClass('selectedimage');
$('li.category').children().hide();
$('li.category').each(
function(column) {
$(this).click(function(event){
if (this == event.target) {
if($(this).is('.plusimageapply')) {
$(this).children().show();
$(this).removeClass('plusimageapply');
$(this).addClass('minusimageapply');
}
else
{
$(this).children().hide();
$(this).removeClass('minusimageapply');
$(this).addClass('plusimageapply');
}
}
});
}
);
});

I hope you serve the example

Greetings

Comments