How can I do it on JQuery? When I click hide, the element will be hidden, same goes for show, the element will be shown. How am I going to do it? Thanks!
<form method="POST">
<button type="submit" name="hidden" >Hide</button>
<button type="submit" name="submit" >Show</button>
</form>
<?php
if (isset($_POST['hidden']) == true){
echo '*hidden*';
} else if ($_POST['']) {
echo 'shown';
}
?>
$(document).ready(function(){
$(input([name='hidden']).click(function(){
$(this).hide();
});
$(input([name='submit']).click(function(){
$(input([name='hidden']).show();
});
});
You can use js like this,
document.getElementById('domid').style.visibility='hidden';
document.getElementById('domid').style.visibility='visible';
I know you asked for JQuery, the best option is straight JS as stated in another post here. But using php, you could define some classes and then change the class value in the tag you wish to control display for upon proper submit of your $_POST value.
<?php
$result = ''; //You could place your default value here or run it through an if/else or switch stmt
if(isset($_POST['show'])){
$result = 'show';
} else if ($_POST['hidden']) {
$result = 'hide';
} else {
$result = 'default';
}
?>
<style>
.show {
display:block;
}
.hide {
display:none;
}
.default {
//however you wish your default CSS to act hidden or visible
}
</style>
<body>
<form method="POST">
<button type="submit" name="hidden" >Hide</button>
<button type="submit" name="show" >Show</button>
</form>
<div id="theElement" class="<?=$result?>"></div>
</body>
An equivalent of your code on jQuery would be the next:
$(() => {
$("#hide-but").on("click", () => $("#result").html("*hidden*"));
$("#show-but").on("click", () => $("#result").html("shown"));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group">
<button type="submit" name="hidden" id="hide-but">Hide</button>
<button type="submit" name="submit" id="show-but">Show</button>
</div>
<div id="result">shown</div></div>