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

Тема в разделе "Верстка", создана пользователем Lobachevsky, 5 окт 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Lobachevsky

    Lobachevsky Постоялец

    Регистр.:
    17 сен 2013
    Сообщения:
    140
    Симпатии:
    49
    Как сделать чтобы номер телефона отображался только при клике
    Код менять не могу т.к. при обновлении все слетит, только добавить css или js
    Код:
    <div class="field ft_string f_phone">
    <div class="title_left">Телефон: </div>
    <div class="value"> 123-45-67 </div>
    </div>
     
  2. kadurinho

    kadurinho

    Регистр.:
    21 июн 2011
    Сообщения:
    601
    Симпатии:
    242
    http://javascript.ru/forum/misc/223...v-blok-i-pri-klike-eshhjo-raz-zakryt-ego.html

    https://www.google.com.ua/search?q=...u:official&channel=sb&q=открытие+div+по+клику
     
  3. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.723
    Симпатии:
    2.098
    $(".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>
     
  4. Lobachevsky

    Lobachevsky Постоялец

    Регистр.:
    17 сен 2013
    Сообщения:
    140
    Симпатии:
    49
    Не работает так
     
  5. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.723
    Симпатии:
    2.098
    вот полный рабочий код, только что перепроверил
    Код:
    <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.: в предыдущем сообщении отсутствуют закрывающие ', либо я завтыкал когда тайпал, либо сожрало при форматировании
     
    Solus_Rex, Lobachevsky и Festem нравится это.
  6. Festem

    Festem Постоялец

    Регистр.:
    4 сен 2014
    Сообщения:
    97
    Симпатии:
    26
    Мне кажется лучше вот так сделать

    Код:
    <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 исчезала :)

    В принципе задача решена, детали дальнейших действий после открытия телефона ТС не описал, так что вопрос можно считать успешно завершенным
     
    Последнее редактирование модератором: 7 окт 2014
    Solus_Rex нравится это.
  7. vlasenkov

    vlasenkov Писатель

    Регистр.:
    4 окт 2014
    Сообщения:
    8
    Симпатии:
    0
  8. Lobachevsky

    Lobachevsky Постоялец

    Регистр.:
    17 сен 2013
    Сообщения:
    140
    Симпатии:
    49
    В итоге сделал так, чтобы еще слово показать контакты срывалось при нажатии
    Код:
        <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>
     
Статус темы:
Закрыта.