CODEWITHSUNDEEP
jquerycssmedia-queries
Naoto Ida
Naoto Ida

Reputation: 157

How to replace div with media queries

I am currently working out the search box for my responsive website, but due to the design, the expand-on-click search box won't fit in the specific area. So, I want to make it so that that search box gets replaced with another button, which will then display a search box in a different place.

How can I replace a div with media queries, or jquery?

Upvotes: 0

Views: 3160

Answers (2)

Denys Séguret
Denys Séguret

Reputation: 382177

Here's how you can do it :

HTML and JavaScript :

  <div id=a>a</div>
  <button id=b>BUT</button>
  <script>
    $('#b').click(function(){$('#a').show()})
  </script>

CSS :

@media (max-height: 500px) {
   #a {
     display: none;  
   }
}
@media (min-height: 500px) {
   #b {
     display: none;  
   }
}

Demonstration

If you reduce the height of the window, the #a div is hidden. But clicking the button shows it. Using the media-queries you may also adjust the position or look of your div for the different dimensions.

Upvotes: 5

writeToBhuwan
writeToBhuwan

Reputation: 3281

HTML

<div id="Box">
    <input type="submit" value="submit" id="submit" class="show" />
    <input type="text" id="text" class="hide" />
</div>

CSS

.show
{
    display:block;
}
.hide
{
    display:none;
}

jquery

$(document).ready(function(){
    $("#Box").dblclick(function(){
        $('#text').toggleClass('show');
        $('#submit').toggleClass('.hide');
    });
});

Upvotes: 0

Related Questions