показать (исчезнуть-скрыть) скрытый текст, когда вы нажимаете на основной текст с?

Question

Поэтому я попробовал это https://jsfiddle.net/e1b88ktf/ Я хочу применить эффект скольжения вниз при нажатии на основной текст. а также скрытый текст должен возвращаться при повторном нажатии на основной текст.

function showText(show,hide)
{
    document.getElementById(show).className = "show";
    document.getElementById(hide).className = "hide";
}

div.hide { 
display:none;}
div.show {
  
}

<a onclick="showText('text1','text2')" href="javascript:void(0);">main-text</a>

<div id="text1" class="hide">
hidden text
</div>

< Сильный > EDIT :
Спасибо за вашу помощь.
Текст появляется с эффектом постепенного увеличения, а div с цветом фона - нет. Как сделать так, чтобы фоновый цвет исчезал вместе с текстом.
см. обновленное Fiddle.

javascript jquery html css

0

user5530936 17 Дек 2015 в 11:55

Answer 1

Проверьте это решение -

function showText(text)
{
  $(text).animate({opacity: 'toggle'}, 800); 
}

div.hide { 
        display:none;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <a onclick="showText('#text1')" href="javascript:void(0);">text</a>
<div id="text1" class="hide">
hidden text
</div>

<p><a onclick="showText('#text2')" href="javascript:void(0);">text2</a>
<div id="text2" class="hide">
hidden text 2
</div>

0

Yogesh Sharma 17 Дек 2015 в 12:23

Answer 2

Вы можете добиться этого с помощью jquery:

$("#text1").slideToggle().toggleClass("show hide");

JSFiddle

< Сильный > ИЗМЕНИТЬ и вам не нужно добавлять / удалять классы в div. Ниже будет работать тоже.

$("#text1").slideToggle();

JSFiddle

Для эффекта затухания используйте .fadeToggle();

0

musafar006 17 Дек 2015 в 09:56

Answer 3

Используйте этот HTML-код :)

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Untitled Document</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
 <style>
   div.hide { display: none; }
   div.show { }
  </style>
  <script>
    function showText()
      {
       $('#text1').slideToggle();
      }
 </script>
 </head>

 <body>
  <a onclick="showText('text1','text2')" href="javascript:void(0);">text</a>
  <div id="text1" class="hide"> hidden text </div>
 </body>
 </html>

0

narendra.lodhi 17 Дек 2015 в 09:12

Answer 4

Вы можете сделать это с помощью метода jQuery toggle ().

HTML :

<div class="toggle">text</div>
<div id="text1">
  hidden text
</div>

JS :

$(document).ready(function(){
    $(".toggle").click(function(){
        $("#text1").toggle(1000);
    });
});

Здесь работает скрипка .

ОБНОВЛЕНИЕ

Для нескольких переключателей попробуйте следующий код:

HTML

<div class="toggle">
  text1
  <div class="hide">
    hidden text1
  </div>
</div>
<div class="toggle">
  text2
  <div class="hide">
    hidden text2
  </div>
</div>

JS

$(document).ready(function(){
    $(".toggle").click(function(){
       $(this).find(".hide").toggle(1000);
    });
});

Вот несколько вариантов переключения: Fiddle .

0

Noopur Dabhi 17 Дек 2015 в 11:58

показать (исчезнуть-скрыть) скрытый текст, когда вы нажимаете на основной текст с?

4 ответа

Похожие вопросы

Новые вопросы

javascript