How do I make this DIV show, when another is clicked?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do I make this DIV show, when another is clicked?

Post by simonmlewis »

http://stackoverflow.com/questions/3469 ... l-on-click
Apologies for showing a link, but this page seems to do sort of what I want, but not exactly.

When in mobile view, I want the user to be able to clic the search icon and the Search Div appear on the phone below it, with the form in it.

But ideally want it to also be on a toggle so it can go away.

I would use a script I mentioned on here earlier, that uses a hidden checkbox. The problem there is this hidden DIV must but outside of the "parent" div. Otherwise I will get a very narrow form field inside the search bottom icon.

So tap search and box appear. Tap again and it goes away.
I can add in the DIV a link to the full search page for "advanced search".
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do I make this DIV show, when another is clicked?

Post by simonmlewis »

http://www.w3schools.com/jquery/tryit.a ... _hide_slow
Trying to use this, but using DIV Ids and I cannot seem to make it work.

Code: Select all

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
<script>
$(document).ready(function(){
    $(".mobile-search").click(function(){
        $(".mobile-searchbox").toggle();
    });
});
</script>

<div class="mobile-search" id="mobile-search">
<a href="#"  onclick="mobileclicked()"><i class="fa fa-search" style='color: #ffffff'></i></a>
</div>

<div class="mobile-cart">
<form action='' method='post' name='basketmobile'>
</form>
<a href="javascript:basketmobile();"><i class="fa fa-shopping-basket" style='color: #ffffff'></i></a>
</div>

<div class='mobile-cart-clear'></div>

<div class='mobile-searchbox' id='mobile-searchbox'>asdfasdf</div>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do I make this DIV show, when another is clicked?

Post by Celauran »

Not sure what the problem is. https://jsfiddle.net/2L4yocp8/
Post Reply