How to show one element when click on the another element with css?

Question

I've used this css code for showing the element when click on the search id tag. This is possible with jquery but I want to do this with css only. Please advise.

   #open_search:active #search{
    display: block;
    transition: all 100ms ease-in-out;
}

html

<div class="row-fluid">
            <div class="span2 language pull-right">
                <div class="language-object">
</div>
            </div>
            <span id="open_search" class=" btn glyphicon glyphicon-search"></span>
            <div id="search" class="span3 pull-left">
                <span id="dnn_dnnSearch_ClassicSearch">
    <span class="searchInputContainer" data-moreresults="مشاهده نتایج بیشتر" data-noresult="نتیجه‌ای یافت نشد">
        <input name="dnn$dnnSearch$txtSearch" maxlength="255" size="20" id="dnn_dnnSearch_txtSearch" class="NormalTextBox" autocomplete="off" placeholder="جستجو..." type="text">
        <a class="dnnSearchBoxClearText"></a>
    </span>
    <a id="dnn_dnnSearch_cmdSearch" class="SearchButton pull-left" href="javascript:__doPostBack('dnn$dnnSearch$cmdSearch','')">Search</a>
</span>
                <span id="close_search" class="btn glyphicon glyphicon-remove "></span>
            </div>
            <div id="login" class="span5  pull-left">

<div id="dnn_dnnLogin_loginGroup" class="registerGroup">
    <a id="dnn_dnnLogin_enhancedLoginLink" title="ورود" class="LoginLink" rel="nofollow" onclick="this.disabled=true;" href="http://localhost/dnn_test/Login?returnurl=%2fdnn_test%2fskin2">&nbsp;ورود&nbsp;</a>
</div>
<div id="dnn_dnnUser_registerGroup" class="registerGroup">
    <ul class="buttonGroup">
        <li class="userDisplayName list-inline">
            <a id="dnn_dnnUser_enhancedRegisterLink" title="ثبت‌نام" rel="nofollow" href="http://localhost/dnn_test/Register?returnurl=http%3a%2f%2flocalhost%2fdnn_test%2fskin2">&nbsp;ثبت‌نام</a>
        </li>

    </ul>
</div>
            </div>
        </div>

If it is not possible with css, then please help to do this with jquery.

Change `#open_search:active #search` to `#open_search:active + #search` — Alex, Nov 28 '15 at 13:54
This is right. but this worked when click on the #open_search . I want after click on the #open_search it show always — hmahdavi, Nov 28 '15 at 13:58
It is not possible by pure css to add class and remove class. You have to use javascript or jquery. — Alex, Nov 28 '15 at 14:01
This would help you. [show hide element with css only](http://stackoverflow.com/questions/19170781/show-hide-divs-on-click-in-html-and-css-without-jquery) — Noopur Dabhi, Nov 28 '15 at 14:06

score 2 · Accepted Answer · answered Nov 28 '15 at 13:53

2

Css:

#search {
    display: none;
    transition: all 100ms ease-in-out;
}

#search.active {
    display: block;
}

jQuery:

$(function(){
   $("#open_search").click(function(){
       $("#search").toggleClass("active");
   });
});

answered Nov 28 '15 at 13:53

Khanh TO

48,509
13
99
115

score 1 · Answer 2 · answered Nov 28 '15 at 14:01

another nice thing is to use labels and checkboxes

<label for="openContent">Toggle Content</label>
<input type="checkbox" id="openContent" style="display:none;" />
<div id="myContent">Here!</div>

and CSS

<style>
    #openContent + #myContent {
        display:none;
    }

    #openContent:checked + #myContent {
        display:block;
    }
</style>

see in jsFidlde

How to show one element when click on the another element with css?

2 Answers2