Dodanie efektu zwijanie jQuery - błąd wyświetla 2 collapsy i nie zwija.

**GiboneKPL** · (Ten post był ostatnio modyfikowany: 27.07.2013, 10:33 przez GiboneKPL.)

wersja skryptu MyBB: 1.6.8
adres forum: Play3Center!
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Cześć. Chciałbym dodać efekt jQuery przy zwijaniu boxów (tak jak działów). Tak wygląda przykładowy box:

<div class="thead_sidebar th_szukajka">

<span class="forumtitle" style="padding-top: 25px;">Szukajka</span>

<span class="expcolimage" id="expcol_szukajka_close"><img src="{$theme['imgdir']}/collapse.gif" style="vertical-align:middle;"/></span>

<span class="expcolimage" id="expcol_szukajka_open"><img src="{$theme['imgdir']}/collapse_collapsed.gif" style="vertical-align:middle;"/></span>

</div>

<div id="expcol_szukajka_box">

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<tbody id='szukajka_e' style='{$collapsed['szukajka_e']}'>

<tr>

<td class="trow1">

<div style="text-align:center;">

<form method="post" action="{$mybb->settings['bburl']}/search.php">

<input type="hidden" name="action" value="do_search">

<input type="hidden" name="postthread" value="1">

<input type="hidden" name="forums" value="all">

<input type="hidden" name="showresults" value="threads">

<input type="text" class="textbox" style="height:20px;width:65%; align:center;" name="keywords" placeholder="Słowa kluczowe">&nbsp;<input type="submit" class="button" style="height:28px;width:25%; align:center;" margin-top: 2px;" value="Szukaj"><br /></form><input type="submit" class="button" style="height:25px;width:94%;margin-top: 10px"; value="Pełna wyszukiwarka" onclick="parent.location.href='{$mybb->settings['bburl']}/search.php'">

</div>

</td>

</tr>

</tbody>

</table>

</div><br />

A tutaj efekt jQuery (dodany w sekcji <head></head> szablonu index. Jak naprawię to będzie w headerinclude w pliku *.js).

<script>

jQuery('#expcol_szukajka_open').hide()

jQuery('#expcol_szukajka_close').click(function () {

      jQuery(this).hide();

      jQuery('#expcol_szukajka_box').slideUp('500', 'swing');

      jQuery('#expcol_szukajka_open').show();

jQuery('.th_szukajka').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"});

      jQuery.cookie("animcol","closed", {expires: 365});

      return false;

    });

jQuery("#expcol_szukajka_open").click(function () {

      jQuery(this).hide();

      jQuery('#expcol_szukajka_box').slideDown('500', 'swing');

      jQuery('#expcol_szukajka_close').show();

jQuery('.th_szukajka').animate({"border-radius":"5px 5px 0 0","opacity":"1"});

      jQuery.cookie("animcol","open", {expires: 365});

      return false;

    });

if(jQuery.cookie("animcol") == "closed") {

        jQuery("#expcol_szukajka_close").hide();

        jQuery("#expcol_szukajka_open").show();

        jQuery('#expcol_szukajka_box').hide();

jQuery('.th_szukajka').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"}); 

};

</script>

I wyświetlają mi się 2 collapsy i nie wiem dlaczego..

Dodatkowo macie dla porównania mój forumbit_depth1_cat:

<div class="thead_2 th_{$forum['fid']}">

<span class="forumtitle" style="paddin-top: 25px;"><a href="{$forum_url}">{$forum['name']}</a></span><span class="forumdesc" id="{$forum['fid']}desc">{$forum['description']}</span>

<span class="expcolimage" id="expcol_{$forum['fid']}_close"><img src="{$theme['imgdir']}/collapse.gif" style="vertical-align:middle;"/></span>

<span class="expcolimage" id="expcol_{$forum['fid']}_open"><img src="{$theme['imgdir']}/collapse_collapsed.gif" style="vertical-align:middle;"/></span>

</div>

<div id="expcol_{$forum['fid']}_box">

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">

<tr>

<td style="padding:0" colspan="2"/>

<td style="padding:0" width="85"/>

<td style="padding:0" width="200"/>

</tr>

<tr>

</tr>

{$sub_forums}

</tbody>

</table>

</div>

<br />

<script>

jQuery('#expcol_{$forum['fid']}_open').hide()

jQuery('#expcol_{$forum['fid']}_close').click(function () {

      jQuery(this).hide();

      jQuery('#expcol_{$forum['fid']}_box').slideUp('500', 'swing');

      jQuery('#expcol_{$forum['fid']}_open').show();

jQuery('.th_{$forum['fid']}').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"});

      jQuery.cookie("animcol","closed", {expires: 365});

      return false;

    });

jQuery("#expcol_{$forum['fid']}_open").click(function () {

      jQuery(this).hide();

      jQuery('#expcol_{$forum['fid']}_box').slideDown('500', 'swing');

      jQuery('#expcol_{$forum['fid']}_close').show();

jQuery('.th_{$forum['fid']}').animate({"border-radius":"5px 5px 0 0","opacity":"1"});

      jQuery.cookie("animcol","open", {expires: 365});

      return false;

    });

if(jQuery.cookie("animcol") == "closed") {

        jQuery("#expcol_{$forum['fid']}_close").hide();

        jQuery("#expcol_{$forum['fid']}_open").show();

        jQuery('#expcol_{$forum['fid']}_box').hide();

jQuery('.th_{$forum['fid']}').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"}); 

};

</script>

@Działa! Naprawiłem. Zobaczymy jak długo pociągnie

@Ok. Działa.. Tylko teraz mam pewien problem. O tuż gdy zwinie się 1 box (w sidebarze) to po odświeżeniu strony zwija WSZYTKO. Działy, boxy.. Udało mi się zrobić żeby czytało to z pliku *.js a wygląda on tak:

jQuery.noConflict();

jQuery('#expcol_szukajka_open').hide()

jQuery('#expcol_szukajka_close').click(function () {
      jQuery(this).hide();
      jQuery('#expcol_szukajka_box').slideUp('500', 'swing');
      jQuery('#expcol_szukajka_open').show();
jQuery('.th_szukajka').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"});
      jQuery.cookie("animcol","closed", {expires: 365});
      return false;
    });
jQuery("#expcol_szukajka_open").click(function () {
      jQuery(this).hide();
      jQuery('#expcol_szukajka_box').slideDown('500', 'swing');
      jQuery('#expcol_szukajka_close').show();
jQuery('.th_szukajka').animate({"border-radius":"5px 5px 0 0","opacity":"1"});
      jQuery.cookie("animcol","open", {expires: 365});
      return false;
    });
if(jQuery.cookie("animcol") == "closed") {
        jQuery("#expcol_szukajka_close").hide();
        jQuery("#expcol_szukajka_open").show();
        jQuery('#expcol_szukajka_box').hide();
jQuery('.th_szukajka').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"}); 
};

jQuery('#expcol_menu_open').hide()

jQuery('#expcol_menu_close').click(function () {
      jQuery(this).hide();
      jQuery('#expcol_menu_box').slideUp('500', 'swing');
      jQuery('#expcol_menu_open').show();
jQuery('.th_menu').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"});
      jQuery.cookie("animcol","closed", {expires: 365});
      return false;
    });
jQuery("#expcol_menu_open").click(function () {
      jQuery(this).hide();
      jQuery('#expcol_menu_box').slideDown('500', 'swing');
      jQuery('#expcol_menu_close').show();
jQuery('.th_menu').animate({"border-radius":"5px 5px 0 0","opacity":"1"});
      jQuery.cookie("animcol","open", {expires: 365});
      return false;
    });
if(jQuery.cookie("animcol") == "closed") {
        jQuery("#expcol_menu_close").hide();
        jQuery("#expcol_menu_open").show();
        jQuery('#expcol_menu_box').hide();
jQuery('.th_menu').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"}); 
};

jQuery('#expcol_facebook_open').hide()

jQuery('#expcol_facebook_close').click(function () {
      jQuery(this).hide();
      jQuery('#expcol_facebook_box').slideUp('500', 'swing');
      jQuery('#expcol_facebook_open').show();
jQuery('.th_facebook').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"});
      jQuery.cookie("animcol","closed", {expires: 365});
      return false;
    });
jQuery("#expcol_facebook_open").click(function () {
      jQuery(this).hide();
      jQuery('#expcol_facebook_box').slideDown('500', 'swing');
      jQuery('#expcol_facebook_close').show();
jQuery('.th_facebook').animate({"border-radius":"5px 5px 0 0","opacity":"1"});
      jQuery.cookie("animcol","open", {expires: 365});
      return false;
    });
if(jQuery.cookie("animcol") == "closed") {
        jQuery("#expcol_facebook_close").hide();
        jQuery("#expcol_facebook_open").show();
        jQuery('#expcol_facebook_box').hide();
jQuery('.th_facebook').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"}); 
};

jQuery('#expcol_mostviews_open').hide()

jQuery('#expcol_mostviews_close').click(function () {
      jQuery(this).hide();
      jQuery('#expcol_mostviews_box').slideUp('500', 'swing');
      jQuery('#expcol_mostviews_open').show();
jQuery('.th_mostviews').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"});
      jQuery.cookie("animcol","closed", {expires: 365});
      return false;
    });
jQuery("#expcol_mostviews_open").click(function () {
      jQuery(this).hide();
      jQuery('#expcol_mostviews_box').slideDown('500', 'swing');
      jQuery('#expcol_mostviews_close').show();
jQuery('.th_mostviews').animate({"border-radius":"5px 5px 0 0","opacity":"1"});
      jQuery.cookie("animcol","open", {expires: 365});
      return false;
    });
if(jQuery.cookie("animcol") == "closed") {
        jQuery("#expcol_mostviews_close").hide();
        jQuery("#expcol_mostviews_open").show();
        jQuery('#expcol_mostviews_box').hide();
jQuery('.th_mostviews').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"}); 
};

jQuery('#expcol_posters_open').hide()

jQuery('#expcol_posters_close').click(function () {
      jQuery(this).hide();
      jQuery('#expcol_posters_box').slideUp('500', 'swing');
      jQuery('#expcol_posters_open').show();
jQuery('.th_posters').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"});
      jQuery.cookie("animcol","closed", {expires: 365});
      return false;
    });
jQuery("#expcol_posters_open").click(function () {
      jQuery(this).hide();
      jQuery('#expcol_posters_box').slideDown('500', 'swing');
      jQuery('#expcol_posters_close').show();
jQuery('.th_posters').animate({"border-radius":"5px 5px 0 0","opacity":"1"});
      jQuery.cookie("animcol","open", {expires: 365});
      return false;
    });
if(jQuery.cookie("animcol") == "closed") {
        jQuery("#expcol_posters_close").hide();
        jQuery("#expcol_posters_open").show();
        jQuery('#expcol_posters_box').hide();
jQuery('.th_posters').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"}); 
};

jQuery('#expcol_reputation_open').hide()

jQuery('#expcol_reputation_close').click(function () {
      jQuery(this).hide();
      jQuery('#expcol_reputation_box').slideUp('500', 'swing');
      jQuery('#expcol_reputation_open').show();
jQuery('.th_reputation').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"});
      jQuery.cookie("animcol","closed", {expires: 365});
      return false;
    });
jQuery("#expcol_reputation_open").click(function () {
      jQuery(this).hide();
      jQuery('#expcol_reputation_box').slideDown('500', 'swing');
      jQuery('#expcol_reputation_close').show();
jQuery('.th_reputation').animate({"border-radius":"5px 5px 0 0","opacity":"1"});
      jQuery.cookie("animcol","open", {expires: 365});
      return false;
    });
if(jQuery.cookie("animcol") == "closed") {
        jQuery("#expcol_reputation_close").hide();
        jQuery("#expcol_reputation_open").show();
        jQuery('#expcol_reputation_box').hide();
jQuery('.th_reputation').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"}); 
};

jQuery('#expcol_topics_open').hide()

jQuery('#expcol_topics_close').click(function () {
      jQuery(this).hide();
      jQuery('#expcol_topics_box').slideUp('500', 'swing');
      jQuery('#expcol_topics_open').show();
jQuery('.th_topics').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"});
      jQuery.cookie("animcol","closed", {expires: 365});
      return false;
    });
jQuery("#expcol_topics_open").click(function () {
      jQuery(this).hide();
      jQuery('#expcol_topics_box').slideDown('500', 'swing');
      jQuery('#expcol_topics_close').show();
jQuery('.th_topics').animate({"border-radius":"5px 5px 0 0","opacity":"1"});
      jQuery.cookie("animcol","open", {expires: 365});
      return false;
    });
if(jQuery.cookie("animcol") == "closed") {
        jQuery("#expcol_topics_close").hide();
        jQuery("#expcol_topics_open").show();
        jQuery('#expcol_topics_box').hide();
jQuery('.th_topics').animate({"border-top-left-radius":"5px","opacity":"0.4","border-top-right-radius":"5px"}); 
}; 

Coś tu jest nie tak, bo właśnie zwija wszystkie (sądzę że to chyba przez to samo id "id=expcol" albo "th_nazwa..". Ale nic, a nic nie kumam

Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Dodanie efektu zwijanie jQuery - błąd wyświetla 2 collapsy i nie zwija.

GiboneKPL

Użytkownicy przeglądający ten wątek:

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie