Tuesday, February 26, 2019

Codeigniter How to make Onclick showHide Radio Button Function (Javascript)


All the code will be coded inside view file. First make your radio button.

<input type="radio" id="expense" name="transaction" onclick="ShowHideDiv()" checked /><?php echo lang('title_expense')?>
<input type="radio" id="income" name="transaction" onclick="ShowHideDiv()" /><?php echo lang('title_income')?>

Make sure the radio button have an id and the same name. Also put onclick that equal to function that you want. For this project we want ShowHideDiv  func.

Then make the div that you want to show or hide.

<div id="expense_list" style="block: none">
//anything that you want to put inside this div
//it can be table or something
</div >

<div id="income_list" style="show: none">
//anything that you want to put inside this div
//it can be table or something
</div >


Lastly make the jquery script to make the ShowHideDiv() func.

<script type="text/javascript">
function ShowHideDiv() {
    var expense = document.getElementById("expense");
    var income = document.getElementById("income");
    var expense_list = document.getElementById("expense_list");
    var income_list = document.getElementById("income_list");
    expense_list.style.display = expense.checked ? "block" : "none";
    income_list.style.display = income.checked ? "block" : "none";
}
</script>


"block" : "none"  - means the func to hide the content is block.
"show" : "none"  - means the func will show nothing.(hide content)

No comments:

Post a Comment

IONIC PASS PARAMETER

 To pass parameter to next page, first we need to make sure that we have 2 pages which is page from and page to. In page from ts file, you h...