작은 접이식 삼각형 : 웹 페이지에서 접을 수있는 섹션을 어떻게 만들 수 있습니까?

Question

일부 웹 페이지에는 하위 메뉴를 붕괴시킬 수있는 "회전"삼각형 컨트롤이 있습니다. 나는 같은 종류의 행동을 원하지만 형식의 섹션을 원합니다.

대출, 이름, 주소 및 도시 입력이있는 양식이 있다고 가정 해 봅시다. 내 사이트 사용자 중 일부는이 필드의 두 번째 세트가 필요합니다. 대부분의 사용자를 위해 추가 필드를 숨기고 싶습니다. 추가 필드가 필요한 것은 한 번의 클릭으로 액세스 할 수 있어야합니다. 어떻게할까요?

Answer 1

아, 나는 당신이 당신의 형태에 접을 수있는 섹션을 원한다는 것을 의미한다고 생각합니다.

요컨대 :

1. "Display : None"의 CSS 속성과 함께 자체 DIV에 붕괴하려는 컨텐츠를 처음에 넣으십시오.
2. JavaScript를 실행하여 디스플레이 속성을 전환하는 삼각형 이미지 (또는 "Hide/Show"와 같은 텍스트) 주위에 링크 (태그)를 감싸십시오.
3. 섹션이 확장/표시되면 삼각형이 "회전"되려면 JavaScript가 동시에 이미지를 교체 할 수 있습니다.

다음은 더 나은 설명입니다. JavaScript 및 CSS로 접을 수있는 DIV를 만드는 방법 [업데이트 2013-01-27 이 기사는 더 이상 웹에서 사용할 수 없습니다. 이 HTML 페이지의 출처 이 기사에서 영감을 얻은 적용된 예제

또는 "CSS 붕괴 섹션"과 같은 단어가있는 Google 검색 또는 Super-Fancy를 포함하여 다른 많은 자습서를 찾을 수 있습니다 (예 : http://xtractpro.com/articles/animated-collapsible-panel.aspx).

Answer 2

JavaScript를 사용하여 요소를 숨기거나 표시하는 가장 기본적인 방법은 요소의 가시성 속성을 설정하는 것입니다.

당신의 예를 감안할 때 당신은 당신의 페이지에 다음 양식을 정의했다고 상상합니다.

<form id="form1">
    <fieldset id="lenderInfo">
        <legend>Primary Lender</legend>
        <label for="lenderName">Name</label>
        <input id="lenderName" type="text" />
        <br />
        <label for="lenderAddress">Address</label>
        <input id="lenderAddress" type="text" />
    </fieldset>
    <a href="#" onclick="showElement('secondaryLenderInfo');">Add Lender</a>
    <fieldset id="secondaryLenderInfo" style="visibility:hidden;">
        <legend>Secondary Lender</legend>
        <label for="secondaryLenderName">Name</label>
        <input id="secondaryLenderName" type="text" />
        <br />
        <label for="secondaryLenderAddress">Address</label>
        <input id="secondaryLenderAddress" type="text" />
    </fieldset>
</form>

여기에는 두 가지 사항이 있습니다.

1. 입력 필드의 두 번째 그룹은 초기에 작은 인라인 CS를 사용하여 숨겨져 있습니다.
2. "Lender Add"링크는 모든 작업을 수행 할 JavaScript 메소드를 호출합니다. 해당 링크를 클릭하면 해당 요소의 가시성 스타일을 동적으로 설정하여 화면에 표시됩니다.

showElement() 가져갑니다 요소 ID 매개 변수로서 다음과 같이 보입니다.

function showElement(strElem) {
    var oElem = document.getElementById(strElem);

    oElem.style.visibility = "visible";

    return false;
}

거의 모든 JavaScript 접근 방식이 후드 아래 에서이 작업을 수행 할 것이지만, 구현 세부 정보를 귀하에게서 숨기는 프레임 워크를 사용하는 것이 좋습니다. 보세요 jQuery, 그리고 jQuery UI 요소를 숨기거나 보여줄 때 훨씬 더 세련된 전환을 얻기 위해.

Answer 3

다음은 확인란을 사용하는 간단한 CSS 전용 솔루션입니다.

.hideNext:not(:checked)+div {
  max-height: 0;
  overflow: hidden;
}

<label for="ch1">More Options</label><input id="ch1" type="checkbox" class="hideNext" />
<div>Whatever you want to hide.</div>
and then more stuff below..