如何通过使用PHP和JavaScript在div上设置按钮来扩展或折叠div

Question

I' am using php and javascript for expanding or collapsing some divs [which must be collapsed bydeafult] by setting up a button[whose text should be expand bydefault] on a div when i click on that button the div gets expanded and text of that button should be automatically changes to "collapse" and again if i click that collapse button the div should be closed and text changes to bydefault as "expand" and bydefault all the divs should be closed heres the code given below i am using : 我正在使用php和javascript通过在div上设置按钮[其文字默认情况下应该扩展]来扩展或折叠某些div [必须通过默认折叠]，当我单击该按钮时div会得到扩展，并且该文本按钮应自动更改为“折叠”，如果再次单击该折叠按钮，则div应该关闭，文本默认更改为“ expand”，默认情况下所有div都应关闭，以下是我正在使用的以下代码：

<!DOCTYPE html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type="text/javascript">
function change()
{
if(document.getElementById("myButton1").value=="expand")
{
document.getElementById("myButton1").value="collapse";

$(document).ready(function(){
  $("#myButton1").click(function(){
  $("div.container").hide("slow");
  });
}
else
{
document.getElementById("myButton1").value="expand";

$(document).ready(function(){
  $("#myButton1").click(function(){
  $("div.container").show("slow");
  });

 }
}

});
</script>
</head>
<body>
<?php
for($i=0;$i<=3;$i++)
{
echo"<div style='position:relative;border:1px solid #A5BEBE;background-color: #E7EFEF;     width:100%; height:300px;'> <input onclick='change()' type='button' value='expand' id='myButton1'     style='position:relative;left:85%;top:4%;background-    color:#B20000;color:white;width:70px;height:20px;font-size:15px;' >";

echo "<div class='container' style='border:1px solid #A5BEBE;background-color:     white;width:100%;height:92.5%;'>
  some text here
</div>";
echo "</div><br><br>";
}
?>

</body>
</html>

i just a beginner in php so tried my best but dint get the desired result please help me out of this thanks in advance 我只是php的初学者，所以我尽了最大努力，但是dint得到了想要的结果，请提前帮助我。

here is some more info 这是更多信息

its not working for my actual code which is: 它不适用于我的实际代码是：

    while($runrows = mysql_fetch_assoc($getquery))
    {
    $title = $runrows ['sometext'];
    $desc = $runrows ['sometext'];
    $url = $runrows ['sometext'];
$a = $runrows ['sometext'];
$b = $runrows ['sometext'];
$c = $runrows ['sometext'];
$d = $runrows ['sometext'];
$e = $runrows ['sometext'];
$f = $runrows ['sometext'];
$g = $runrows ['sometext']; 


echo "
<div style='position:relative;border:1px solid #A5BEBE;background-color: #E7EFEF;width:84%;'>     <input onclick='change()' type='button' value='expand' class='myButton'         style='position:relative;left:85%;top:4%;background-    color:#B20000;color:white;width:70px;height:30px;font-size:15px;' >  <b><p style='padding-    bottom:2px;font-size:30px;'><font color='red'>".$title."</font></p></b><p><b>sometext :</b>$desc<br>
<b> sometext:-</b><a href='".$url."'>$url</a><br>
<b>sometext :</b>$b<br>
<b>sometext :</b>$c<br>
<b>sometext :</b>$d<br>
<b>sometext :</b>$e<br>
<b>sometext :</b>$f<br>
<b>sometext :</b>$g</p>";
echo "<div class='container' style='border:1px solid #A5BEBE;background-color: white;'>";
 include ('botfunction.php'); 
echo "</div>";
echo "</div><br>";

}

@TheGr8_Nik your code is not working for this . @ TheGr8_Nik您的代码不适用于此。 this is the small part of actual code but its not working there 这是实际代码的一小部分，但无法正常工作

Answer 1

You can use: 您可以使用：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

or switch function: 或开关功能：

$("button").click(function(){
  $("p").toggle();
});

Here is the working example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle 这是工作示例： http : //www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

Answer 2

I would change your code so: 我会更改您的代码，以便：

<script>
  $(document).ready(function(){

    $('.myButton').click(function(){
      if ( this.value === 'collapse' ) {
        // if it's open close it
        open = false;
        this.value = 'expand';
        $(this).next("div.container").hide("slow");
      }
      else {
        // if it's close open it
        open = true;
        this.value = 'collapse';
        $(this).siblings("[value='collapse']").click(); //to collapse the open divs
        $(this).next("div.container").show("slow");
      }
    });

  });
</script>

jsFiddle example jsFiddle示例

Answer 3

JsFiddle JsFiddle

You can use this 你可以用这个

Script 脚本

$(function(){
    $(document).on('click','#con div button',function(){
     if($(this).parent().hasClass('expand'))
     { $(this).parent().removeClass('expand');
       $(this).html('Expand');}
        else{$(this).parent().addClass('expand');
       $(this).html('Collapse');}

    })

});

HTML 的HTML

<div id="con">
    <div class="expand"><button >Collapse</button></div>
    <div class="expand"><button >Collapse</button></div>
    <div class="expand"><button >Collapse</button></div>
    <div class="expand"><button >Collapse</button></div>
</div>

This will expand and collapse div's based on the container. 这将基于容器扩展和折叠div。

如何通过使用PHP和JavaScript在div上设置按钮来扩展或折叠div

问题描述

3 个解决方案

解决方案1
0 2014-12-01 11:53:26

解决方案2
0 已采纳 2014-12-01 11:54:32

解决方案3
0 2014-12-01 12:39:35

如何通过使用PHP和JavaScript在div上设置按钮来扩展或折叠div

问题描述

3 个解决方案

解决方案1 0 2014-12-01 11:53:26

解决方案2 0 已采纳 2014-12-01 11:54:32

解决方案3 0 2014-12-01 12:39:35

解决方案1
0 2014-12-01 11:53:26

解决方案2
0 已采纳 2014-12-01 11:54:32

解决方案3
0 2014-12-01 12:39:35