Показать скрытые данные по клику мышки

[phpMaster]

Пример :

Вам потребуется добавить на свой сайт библиотеку jQuery. Если Вы не добавляли ее ранее, то ее следует добавить следующим образом:

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Далее Вам понадобиться добавить на свой сайт небольшой JavaScript код, который будет отлавливать клики по указанным элементам и в соответствии от значений их идентификаторов (id) подгружать соответствующие им данные с сервера:

<script type="text/javascript">
$(document).ready(function(){
$(".phone>*").click(function(){
    id_elem=$(this).parent().attr("id");
    jQuery.post("show_data.php",{id:id_elem},show_phone);
});
function show_phone(data){
    $("#"+id_elem+".phone").fadeOut(500, function(){
        $(this).html(data).fadeIn(500);
    });
}
});
</script>

Теперь Вам следует создать в корневой папке Вашего сайта файл с именем show_data.php. Можно конечно создать файл и с другим именем, но тогда в предыдущем скрипте стоит его также исправить на новое. Внутрь созданного файла поместите следующий код:

<?php
$db=mysqli_connect("localhost","Логин","Пароль","Имя_БД");
$res=mysqli_fetch_array(mysqli_query($db,"SELECT data FROM table WHERE id=".(int)$_POST["id"].""));
echo $res[0];
?>

Как видите, данный код просто делает запрос к БД для получения из нее нужных данных по id. Таким образом, скрипт в целом по клику обращается к файлу show_data.php и выводит полученные данные пользователю, кликнувшему по указанному объекту на страничке сайта. Вам потребуется указать имя таблицы и столбца, в которых хранятся скрываемые данные вместо table и data соответственно.


Теперь Вам остается добавить на странички кнопки (изображения и т.д.) по клику на которые будут подгружаться защищаемые данные. Делается это так:

<p>
Телефон: +7<span class="phone" id="11"><input type="submit" value="Показать"></span>
</p>
<p>
Телефон: +7<span class="phone" id="22"><u>Показать.</u></span>
</p>
<p>
Телефон: +7<span class="phone" id="33"><img src="image/show_data.png" alt=""></span>
</p>