Открыть div при клике

Статус
В этой теме нельзя размещать новые ответы.
Lobachevsky

Lobachevsky

Гуру форума
Регистрация
17 Сен 2013
Сообщения
141
Реакции
54
Как сделать чтобы номер телефона отображался только при клике
Код менять не могу т.к. при обновлении все слетит, только добавить css или js
Код: 
<div class="field ft_string f_phone">
<div class="title_left">Телефон: </div>
<div class="value"> 123-45-67 </div>
</div>
 
Lobachevsky написал(а):
Как сделать чтобы номер телефона отображался только при клике
Код менять не могу т.к. при обновлении все слетит, только добавить css или js
Код: 
<div class="field ft_string f_phone">
<div class="title_left">Телефон: </div>
<div class="value"> 123-45-67 </div>
</div>
Нажмите для раскрытия...
Для просмотра ссылки Войди или Зарегистрируйся

Для просмотра ссылки Войди или Зарегистрируйся
 
Lobachevsky написал(а):
Как сделать чтобы номер телефона отображался только при клике
Код менять не могу т.к. при обновлении все слетит, только добавить css или js
Код: 
<div class="field ft_string f_phone">
<div class="title_left">Телефон: </div>
<div class="value"> 123-45-67 </div>
</div>
Нажмите для раскрытия...
$(".f_phone").click(function () {
$(this).find('.title_left).toggle();
$(this).find('.value).toggle();
});

нужно, чтоб к странице был подключён jquery, можно даже через cdn
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
 
Шумадан написал(а):
$(".f_phone").click(function () {
$(this).find('.title_left).toggle();
$(this).find('.value).toggle();
});

нужно, чтоб к странице был подключён jquery, можно даже через cdn
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
Нажмите для раскрытия...
Не работает так
 
Lobachevsky написал(а):
Не работает так
Нажмите для раскрытия...
вот полный рабочий код, только что перепроверил
Код: 
<html>
<head>
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="field ft_string f_phone" style='cursor:pointer'>Click
    <div class="title_left" style='display: none'>Телефон: </div>
    <div class="value" style='display: none'> 123-45-67 </div>
</div>
<script>
$(".field").click(function () {
$(this).find('.title_left').toggle();
$(this).find('.value').toggle();
});
</script>
</body>
</html>
P.S.: в предыдущем сообщении отсутствуют закрывающие ', либо я завтыкал когда тайпал, либо сожрало при форматировании
 
Мне кажется лучше вот так сделать

Код: 
<html>
<head>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="field ft_string f_phone" style='cursor:pointer'><div class="title" >Click</div>
    <div class="title_left" style='display: none'>Телефон: </div>
    <div class="value" style='display: none'> 123-45-67 </div>
</div>
<script>
$(".field").click(function () {
$(this).find('.title_left').toggle();
$(this).find('.value').toggle();
$(this).find('.title').toggle();

});
</script>
</body>

Т.е. чтоб при появлении телефонов надпись Click исчезала :)

В принципе задача решена, детали дальнейших действий после открытия телефона ТС не описал, так что вопрос можно считать успешно завершенным
 
Последнее редактирование модератором:
В итоге сделал так, чтобы еще слово показать контакты срывалось при нажатии
Код: 
    <h3 class="alert alert-success">
    <script type="text/javascript">
        $(document).ready(function() {
        $("span.spoiler").hide();
        $('<a class="reveal" style="color:#fff;cursor:pointer"></a> ').insertBefore('.spoiler');
        $("a.reveal").click(function(){
        $(this).parents("h3").children("span.spoiler").fadeIn(2500);
        $(this).parents("h3").children("a.reveal").fadeOut(600);
        });
        });
    </script>
        <span class="glyphicon glyphicon-phone-alt"></span>
            <a class="reveal" style="color:#333;cursor:pointer">Показать контакты</a>
        <span class="spoiler" style="display: none;"><?php echo $item['phone']; ?> - <?php echo $item['user']['nickname']; ?></span>
    </h3>    <h3 class="alert alert-success">
    <script type="text/javascript">
        $(document).ready(function() {
        $("span.spoiler").hide();
        $('<a class="reveal" style="color:#fff;cursor:pointer"></a> ').insertBefore('.spoiler');
        $("a.reveal").click(function(){
        $(this).parents("h3").children("span.spoiler").fadeIn(2500);
        $(this).parents("h3").children("a.reveal").fadeOut(600);
        });
        });
    </script>
        <span class="glyphicon glyphicon-phone-alt"></span>
            <a class="reveal" style="color:#333;cursor:pointer">Показать контакты</a>
        <span class="spoiler" style="display: none;"><?php echo $item['phone']; ?> - <?php echo $item['user']['nickname']; ?></span>
    </h3>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху