[SOLVED] jquery show hide (scroll)

[patak]

Hi!
I am developing one site with cmsms mle 1.6.6 using jquery.
I have module like news with text fields short_text and long_text. If long_text is not empty it filled into div with style="display: none" If reader likes to read more click on anchor more and div with long_text is show.
At the end of the long_text is another anchor to hide long_text.
For this feature I use jquery hide and show function and it works.
My problem is that I would like to achieve go back to more anchor after click on hide anchor because long_text might be longer than content height of content div.

May I ask someone for help. I am not javascript developer and this makes me crazy.

This is my template code

Code: Select all

{if $itemcount > 0}
  {foreach from=$itemlist item="item"}
  {counter name="c1" assign="pressID"}
    <div id="response"><strong>{$item->medium}</strong><br />
    {if $item->heading != ""}<strong>{$item->heading}</strong><br />{/if}
    {if $item->author != ""}{$item->author}<br />{/if}
    <div class="short_text">{$item->short_text}{if $item->long_text != ""}<a href="#" id="more_{$pressID}"> »</a>{/if}</div>
    {if $item->long_text != ""}<div id="press{$pressID}" style="display: none">{$item->long_text}
      <p class="hide">{if $item->long_text != ""}{*wm_anchor anchor=more_$pressID id=hide_$pressID text='«'*}<a href="#more_{$pressID}" id="hide_{$pressID}">«</a></p>
    {/if}</div>{/if}
    {literal}
    <__script__ language="javascript">
    $(document).ready(function() {
         // hide div#pressID as soon as DOM is ready
         $('div#press{/literal}{$pressID}{literal}').hide();
         // after click a#more_ID show div#pressID
         $("a#more_{/literal}{$pressID}{literal}").click(function () {
         $("div#press{/literal}{$pressID}{literal}").show("fast");
         return false;
         });
         // after click a#hide hide div#pressID
         $('a#hide_{/literal}{$pressID}{literal}').click(function() {
         $('div#press{/literal}{$pressID}{literal}').hide('fast');
         return false;
         });
     });
    </__script>
    {/literal}
    </div>
  {/foreach}
{/if}

Thanks in advance!

[patak]

Hi!
I am developing one site with cmsms mle 1.6.6 using jquery.
I have module like news with text fields short_text and long_text. If long_text is not empty it filled into div with style="display: none" If reader likes to read more click on anchor more and div with long_text is show.
At the end of the long_text is another anchor to hide long_text.
For this feature I use jquery hide and show function and it works.
My problem is that I would like to achieve go back to more anchor after click on hide anchor because long_text might be longer than content height of content div.

May I ask someone for help. I am not javascript developer and this makes me crazy.

This is my template code

Code: Select all

{if $itemcount > 0}
  {foreach from=$itemlist item="item"}
  {counter name="c1" assign="pressID"}
    <div id="response"><strong>{$item->medium}</strong><br />
    {if $item->heading != ""}<strong>{$item->heading}</strong><br />{/if}
    {if $item->author != ""}{$item->author}<br />{/if}
    <div class="short_text">{$item->short_text}{if $item->long_text != ""}<a href="#" id="more_{$pressID}"> »</a>{/if}</div>
    {if $item->long_text != ""}<div id="press{$pressID}" style="display: none">{$item->long_text}
      <p class="hide">{if $item->long_text != ""}{*wm_anchor anchor=more_$pressID id=hide_$pressID text='«'*}<a href="#more_{$pressID}" id="hide_{$pressID}">«</a></p>
    {/if}</div>{/if}
    {literal}
    <__script__ language="javascript">
    $(document).ready(function() {
         // hide div#pressID as soon as DOM is ready
         $('div#press{/literal}{$pressID}{literal}').hide();
         // after click a#more_ID show div#pressID
         $("a#more_{/literal}{$pressID}{literal}").click(function () {
         $("div#press{/literal}{$pressID}{literal}").show("fast");
         return false;
         });
         // after click a#hide hide div#pressID
         $('a#hide_{/literal}{$pressID}{literal}').click(function() {
         $('div#press{/literal}{$pressID}{literal}').hide('fast');
         return false;
         });
     });
    </__script>
    {/literal}
    </div>
  {/foreach}
{/if}

Thanks in advance!

I've made some modifications and it works 

Code: Select all

{if $itemcount > 0}
  {foreach from=$itemlist item="item"}
  {counter name="c1" assign="pressID"}
    <div class="response" id="response_{$pressID}><strong>{$item->medium}</strong><br /> //here was id="response" - bad idea  ;)
    {if $item->heading != ""}<strong>{$item->heading}</strong><br />{/if}
    {if $item->author != ""}{$item->author}<br />{/if}
    <div class="short_text">{$item->short_text}{if $item->long_text != ""}<a href="#" id="more_{$pressID}"> »</a>{/if}</div>
    {if $item->long_text != ""}<div id="press{$pressID}" style="display: none">{$item->long_text}
      <p class="hide">{if $item->long_text != ""}{*wm_anchor anchor=more_$pressID id=hide_$pressID text='«'*}<a href="#more_{$pressID}" id="hide_{$pressID}">«</a></p>
    {/if}</div>{/if}
    {literal}
    <__script__ language="javascript">
    $(document).ready(function() {
         // hide div#pressID as soon as DOM is ready
         $('div#press{/literal}{$pressID}{literal}').hide();
         // after click a#more_ID show div#pressID
         $("a#more_{/literal}{$pressID}{literal}").click(function () {
         $("div#press{/literal}{$pressID}{literal}").slideDown('slow');
         return false;
         });
         // after click a#hide hide div#pressID
         $('a#hide_{/literal}{$pressID}{literal}').click(function() {
         $('div#press{/literal}{$pressID}{literal}').slideUp('fast');

         //find offset of div to scroll to
         var elementOffset = $("#content div#response_{/literal}{$pressID}{literal}").eq($(this).attr("name") ).offset().top;
         //find offset of content div
         var divOffset = $('#content').offset().top;
         //scrolling
         $('#content').animate({scrollTop: '+=' + (elementOffset - divOffset) + 'px'}, 700);
         return false;
         });
     });
    </__script>
    {/literal}
    </div>
  {/foreach}
{/if}