Активная панель при нажатии на угол на JavaScript и CSS

Всех приветствую в очередном уроке и сразу же хочется отметить, что наступил уже Новый Год, каждого хочу поздравить с этим замечательным праздником и пожелать, чтобы он был намного лучше прежнего, намного успешнее и ярче! И так, тема нашего сегодняшнего урока -  активная панель при нажатии на угол. В данном случае, я использовал картинку угол, думаю она более подходит под данный пример работы скрипта, Вы же можете использовать свою идею, свои решения, главное разобраться, как это все работает.

Для начала подключим стили и библиотеку jquery-1.10.2.min.js.

<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Затем нам нужен скрипт, который будет открывать и закрывать панель при нажатии на угол.

<script type="text/javascript">
jQuery(document).ready(function($) {
    /* Создаем переменную, в которую перемешаем идентификатор контента*/
  var ugol_content = $("#ugol_content");
  /* Создаем переменную, в которую перемешаем идентификатор угла*/
    var ugol = $("#ugol");
    
    /* Создаем функцию, в которой содержим анимацию сворачивания и разворачивания контента
  при нажатии на угол*/
    ugol.click(function(){
        ugol_content.animate({
            height: 'toggle'
        });
  });	
});

</script>

Создаем идентификатор content, в который помещаем весь блок с углом и его контентом. Далее сама часть, которая будет открываться и закрываться при нажатии на угол с идентификатором ugol_content, затем прописываем ссылку с идентификатором ugol на картинку ugol.png.

Для зрительного представления, я добавил идентификатор menu, в котором Вы можете по своему желанию расположить меню или что то другое.  

<!-- Начало контента -->
<div id="content">

<!-- Начало контента угла и свойства текста -->
<div id="ugol_content" class="text_content">
К примеру, контент
</div>

<!-- Ссылка на угол -->
<a href="#" id="ugol"></a>

<!-- Контент с меню или с чем то другим, на Ваш вкус -->
<div id="menu">
К примеру, меню
</div>

</div>

Из обязательных идентификаторов стоит выделить ugol_content, который имеет свойство display: none, а также идентификатор ugol, который имеет все нужные входящие в него свойства.

/* Активная панель при нажатии на угол */

#content{ 
background: #1b75ba;
}

#ugol_content{
display: none;
}

.text_content
{
color: #fff;
font-size: 16px;
padding: 20px;
}

.text_content p
{
color: #06ff00;
font-size: 16px;
padding: 20px;
}

#ugol{
position: absolute;
right: 0px;
width: 100px;
height: 100px;
background: url(ugol.png) no-repeat 0px 0px;
}

#menu
{
background: #fff;
font-size: 16px;
padding: 20px;
}

#menu span
{
color: #d200ff;
font-weight: bold;
font-size: 20px;
}

Спасибо всем за внимание, удачи в реализации и с наступающим рождеством!