[WebProject]

די פשוט, ואגב, חבל מאוד שאתה לא משתמש בחיפוש, אחרת בשביל מה קיים GOOGL?
ותערוך את ההודעה שלך, ותבקש עזרה, כי קודים מוכנים אסור לתת פה, בגלל זה אצלי, קוד קטן מלווה בהסבר.
--

הרעיון פה, הוא ליצור קוד, כאשר בCSS שלו, נגדיר לו שהוא יהיה מוסתר (hidden), ולאחר מכן, בקוד JS, נבצע תנאי אשר יבדוק אם הוא מוסתר (hidden) או שהוא מוצג (visible), ונבצע קוד JS בהתאם.

PHP קוד:

<a href="javascript:blockChange()">Open Block</span>
<div id="block" style="visibility: hidden">
   You can close or open me :D
</div> 


בקוד זה יצירתי קישור, אשר מוביל לפונקציית JS כלשהי, אשר עדיין לא כתבנו, לאחר מכן, יצרנו div ולו הוספנו style בעל התכונה visibility, ולתכונה זאת קבענו hidden, ובעצם בכניסה ישירה לדף, הוא יהיה מוסתר (כמובן שתוכל להפוך את זה, ולכתוב visible, ואז הוא יהיה מוצג בדף).

עכשיו, מה שנשאר לנו, זה לכתוב קוד JS קצר יחסית, שקודם כל, יבצע בדיקה, האם הDIV מוסתר \ מוצג, ויבצע פעולה בהתאם.

PHP קוד:

    function blockChange()
    {
        var block = document.getElementById('block').style.visibility;
            if(block == "hidden")
            {
                document.getElementById('block').style.visibility='visible';
            }
            else
            {
                document.getElementById('block').style.visibility='hidden'
            }
        
    } 


בקוד זה בעצם יצרתי משתנה קודם כל, אשר מכיל את התכונה visibility ובה את המצב של האלמנט שבמקרה זה הוא block.
לאחר מכן, יצרנו תנאי, אשר בודק למה שווה המשתנה, האם האלמנט מוצג או מוסתר, ובהתאם, מבצע פעולה פשוטה של הסתרה והצגה של האלמנט על ידי שימוש בCSS בתגית visibility.

ישנה אפשרות גם לקבוע משתנה שהוא בעצם האלמנט, ככה למשל בפורום, לכל קטגוריה יש ID, ועל מנת לסגור את הקטגוריה הנכונה, תוכל להשתמש לדוגמא בזה: blockChange(2) ואז זה יסגור את הקטגוריה עם הID 2, פה בעצם תצטרך לשנות את הקוד, בקוד JS, בפונקציה להוסיף את הפרמטר catID, ואז במקום block בgetElementById תצטרך לשנות לcatID.

PHP קוד:

function blockChange(catID)
{
 ..............
document.getElementById(catID)...... 


ואם אתה שואל, כן, משעמם לי :P