スライドトグルを取得して非表示のコンテンツを展開表示する

Question

ページの読み込み中のタイトルのみを表示するメニューを表示しようとしています。次に、メニュータイトルまたは.project-name-blockをクリックすると、メニュー項目が展開され、クリックされた項目の説明が表示されます。今はメニュー項目を完全に消してしまいます。私はそれが機能していないので、説明を表示しようとしていた方法をコメントアウトしました。

サイドノート...どのように最初のproject-name-blockをページの読み込み時に完全に展開することができますか？

UPDATE：

私はこれに私のJavaScriptを変更しましたが、私は、私はそれだけで具体的な記載はなく、3つすべて表示するようにクリックされたボックスを取得する方法を見つけ出すことはできません。..

$('.project-name-block').click(function() { 
    //$(this).slideToggle('slow'); 
    $('.project-name-description').slideToggle('slow'); 
    //$(this).attr('project-name-description').show(); 
}); 

オリジナルコード：

$('.project-name-block').click(function() { 
 
    $(this).slideToggle('slow'); 
 
    //$(this).attr('project-name-description').show(); 
 
});

.project-name-block { 
 
\t border-top: 1px solid black; 
 
\t padding: 20px 10px; 
 
\t width: 30%; 
 
} 
 
.project-name-title { 
 
\t color: blue; 
 
\t font-size: 2em; 
 
} 
 
.project-name-description { 
 
\t display: none; 
 
\t font-size: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="project-name-container-right"> 
 
\t \t \t \t <div class="project-name-block"> 
 
\t \t \t \t \t <div class="project-name-title">Project 1</div> 
 
\t \t \t \t \t <div class="project-name-description">This is the text for Project 1</div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="project-name-block"> 
 
\t \t \t \t \t <div class="project-name-title">Project 2</div> 
 
\t \t \t \t \t <div class="project-name-description">This is the text for Project 2</div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="project-name-block"> 
 
\t \t \t \t \t <div class="project-name-title">Project 3</div> 
 
\t \t \t \t \t <div class="project-name-description">This is the text for Project 3</div> 
 
\t \t \t \t </div> 
 
\t \t \t </div>

Answer 1

あなたはこのようにしたい：

JS: 
 

 
var allPanels = $('.project-name-description').hide(); 
 
$('.project-name-block:eq(0) .project-name-description').show(); 
 
$('.project-name-block').click(function() { 
 
    allPanels.slideUp(); 
 
    $(this).children('.project-name-description').slideDown(); 
 
    return false; 
 
});

.project-name-block { 
 
\t border-top: 1px solid black; 
 
\t padding: 20px 10px; 
 
\t width: 30%; 
 
} 
 
.project-name-title { 
 
\t color: blue; 
 
\t font-size: 2em; 
 
} 
 
.project-name-description { 
 
\t display: none; 
 
\t font-size: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="project-name-container-right"> 
 
\t \t \t \t <div class="project-name-block"> 
 
\t \t \t \t \t <div class="project-name-title">Project 1</div> 
 
\t \t \t \t \t <div class="project-name-description">This is the text for Project 1</div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="project-name-block"> 
 
\t \t \t \t \t <div class="project-name-title">Project 2</div> 
 
\t \t \t \t \t <div class="project-name-description">This is the text for Project 2</div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="project-name-block"> 
 
\t \t \t \t \t <div class="project-name-title">Project 3</div> 
 
\t \t \t \t \t <div class="project-name-description">This is the text for Project 3</div> 
 
\t \t \t \t </div> 
 
\t \t \t </div>

Answer 2

$(document).ready(function() { 
     $('.project-name-block:eq(0)').slideDown('slow'); 
})