PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sun Oct 22, 2017 1:39 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 3 posts ] 
Author Message
PostPosted: Mon Oct 17, 2016 8:52 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
http://stackoverflow.com/questions/34691343/show-and-hide-div-element-with-pure-css-and-html-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.


Top
 Profile  
 
PostPosted: Mon Oct 17, 2016 8:56 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow
Trying to use this, but using DIV Ids and I cannot seem to make it work.

Syntax: [ Download ] [ Hide ]
<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&#058;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.


Top
 Profile  
 
PostPosted: Tue Oct 18, 2016 6:53 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6390
Location: Montreal, Canada
Not sure what the problem is. https://jsfiddle.net/2L4yocp8/

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group