Сделать появляющийся комментарий

maxi2013

maxi2013

Мой дом здесь!
Регистрация
9 Янв 2013
Сообщения
511
Реакции
217
Подскажите как на странице оформления заказа стандартный комментарий сделать так, чтобы при нажатии на "Добавить комментарий к заказу" появлялось поле для ввода комента и при этом текст менялся на "Скрыть комментарий к заказу " при нажатии на который поле исчезало и вновь появлялся текст "Добавить комментарий к заказу".
Может както через яваскрипт или CSS. Подскажите.фывуцйчсм.JPG
под вот этот код
Код: 
<?php // Leave A Comment Field ?>
        <div class="customer-comment marginbottom15">
     
        <a h class="comment" >
        <?php echo JText::_ ('COM_VIRTUEMART_COMMENT_CART'); ?>
        </a>
         
            <br/>
            <div style="display:none" >
            <textarea class="customer-comment" name="customer_comment" cols="60" rows="1"><?php echo $this->cart->customer_comment; ?></textarea>
        </div>
        </div>
        <?php // Leave A Comment Field END ?>
 
диву в котором текстареа присвой id="divcomm"
Код: 
$('a.comment').click(function(){
  if ($("#divcomm").is(":visible"))
    $("#divcomm").hide();
  else
    $("#divcomm").show();
});
 
Что то подобное можно сделать без задействования js, используя только css
HTML: 
<style>
#comment{
    display: none;
}
 
#comment + div{
    display: none;
}
 
#comment:checked + div{
    display: block;
}
 
</style>
<body>
 
<label for="comment">Комментарий к заказу</label>
<input type="checkbox" id="comment">
<div><textarea></textarea></div>
 
</body>
 
zardoz написал(а):
Что то подобное можно сделать без задействования js, используя только css
HTML: 
<style>
#comment{
    display: none;
}
 
#comment + div{
    display: none;
}
 
#comment:checked + div{
    display: block;
}
 
</style>
<body>
 
<label for="comment">Комментарий к заказу</label>
<input type="checkbox" id="comment">
<div><textarea></textarea></div>
 
</body>
Нажмите для раскрытия...

Клик на CSS не повесишь:( Хотя можно извратиться и сделать так, как написано Для просмотра ссылки Войди или Зарегистрируйся. Но, ИМХО, огород такой городить не стоит.

ТСу:

HTML: 
<div class="customer-comment marginbottom15">
   
        <a class="comment" id='a_comment_label' >
        <span id='span_comment_label'><?php echo JText::_ ('COM_VIRTUEMART_COMMENT_CART'); ?></span>
        </a>
       
            <br/>
        <div style="display:none" id='div_commment_text' >
            <textarea class="customer-comment" name="customer_comment" cols="60" rows="3">
           
                <?php if ($this->cart->customer_comment) echo $this->cart->customer_comment; ?>
           
            </textarea>
        </div>
</div>
 
<script>
    $(document).ready(function(){
        $('a#a_comment_label').click(function(){
                if ($("div#div_commment_text").is(":visible"))
                        $("div#div_commment_text").hide();
                        $("span#span_comment_label").text("<?php echo JText::_ ('COM_VIRTUEMART_COMMENT_CART'); ?>");
                else
                        $("div#div_commment_text").show();
                        $("span#span_comment_label").text("Скрыть комментарий к заказу");
            });
   
    });
</script>

2 ne4to: $("a.comment") вернет массив элементов. Элементов определенного класса может быть несколько, а нам нужна конкретная.

P.S. span всунул для наглядности:)
 
К сожалению ни одна из версий не работает почемуто. Нажимаю и ничего не происходит.
Получилась только лишь такая связка

PHP: 
<script type="text/javascript">
function otkr(){
var text=document.getElementById('text');
if(text.style.display=='none')
{
text.style.display='block';
}
else
{
text.style.display='none';
}
}
</script>

PHP: 
<?php // Leave A Comment Field ?>
        <div class="customer-comment marginbottom15">
     
        <a href="#" class="comment" onclick="otkr()">
        <?php echo JText::_ ('COM_VIRTUEMART_COMMENT_CART'); ?>
        </a>
         
            <br/>
            <div id="text" style="display:none" >
            <textarea class="customer-comment" name="customer_comment" cols="60" rows="1"><?php echo $this->cart->customer_comment; ?></textarea>
        </div>
        </div>
        <?php // Leave A Comment Field END ?>

Но минус в том, что когда открывает то перекидыает в самый верх страницы и при закрытии тоже. Тоесть я нажимаю добавить комент. меня кидат в самый верх страницы, потом мне нужно роликом мышки прокрутиться в самый низ до поля ввода коментов. вобщем както плоховато. неужели нельзя чтобы страница оставалась на месте. Нажал "Добавить комент" сразу появилось поле. потом нажал "Скрыть комент" оно скрыло. И страницу не сдвигало все время вверх.
 
  • Заблокирован
  • #6
а можно сделать так чтоб с перво начиналось обротный отчет а потом откривалось окно???
 
Подскажите как подправить код, чтобы после нажатия на "Добавить комментарий к заказу" этот текст менялся на "Скрыть комментарий "
PHP: 
<script type="text/javascript">
function otkr(){
 
if(comentar.style.display=='none')
{
comentar.show();
}
else
{
comentar.hide();
}
}
</script>
 
 
 
        <?php // Leave A Comment Field ?>
        <div class="customer-comment marginbottom15">
 
        <a  class="comment" style="cursor: pointer;" onclick="otkr()">
                  Добавить комментарий к заказу
        </a>
   
            <br/>
            <div id="comentar" style="display:none" >
            <textarea class="customer-comment" name="customer_comment" cols="60" rows="5"><?php echo $this->cart->customer_comment; ?></textarea>
        </div>
        </div>
        <?php // Leave A Comment Field END ?>
 
не проверял, но вроде так:
Код: 
<script type="text/javascript">
function otkr(){
 
if(comentar.style.display=='none')
{
comentar.show();
document.getElementById('toggle_comment').innerHTML = 'Убрать коментарий';
}
else
{
comentar.hide();
}
}
</script>
 
 
 
        <?php // Leave A Comment Field ?>
        <div class="customer-comment marginbottom15">
 
        <a  id="toggle_comment" class="comment" style="cursor: pointer;" onclick="otkr()">
                  Добавить комментарий к заказу
        </a>
   
            <br/>
            <div id="comentar" style="display:none" >
            <textarea class="customer-comment" name="customer_comment" cols="60" rows="5"><?php echo $this->cart->customer_comment; ?></textarea>
        </div>
        </div>
        <?php // Leave A Comment Field END ?>
 
maxi2013 написал(а):
Но минус в том, что когда открывает то перекидыает в самый верх страницы и при закрытии тоже.
Нажмите для раскрытия...
Так ты повесь return false на обработчик клика. Всё ок будет. Сейчас он по # прыгает.
Код: 
<a href="#" class="comment" onclick="otkr(); return false;">
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху