CODEWITHSUNDEEP
jquerycordova
app-like-that
app-like-that

Reputation: 11

Best way to show/hide content in PhoneGap page without refreshing the whole page?

I'm new to PhoneGap and this has been racking my brain for weeks. I was wondering if somebody could give me their opinion on the best way to do this.

Here's a very quick drawing of my app page layout:

enter image description here

Black = header

Blue = buttons

Cream = content area

The content area has 3 divs, that I want to show depending on what button has been clicked. I'm wanting the black header to not have to refresh.

What's the best way to have the divs refresh every time a button is pressed?

Upvotes: 1

Views: 1066

Answers (2)

yihangho
yihangho

Reputation: 2215

You can use the display CSS property or the jQuery .show()/.hide() methods to show/hide DOM elements:

$('#button1').click(function() {
  // jQuery style
  $('#div1').show();
  $('#div2').hide();

  // Vanilla JS style
  document.getElementById('div1').style.display = 'none';
  document.getElementById('div2').style.display = 'block';
});

If you opt to use the display property, do take note that when you want to show a hidden element, the correct value to set to the display property might not always be block. For e.g., when you're dealing with a span, then it, by default, should be inline.

Upvotes: 0

danopz
danopz

Reputation: 3408

Since you are using jQuery (taken from tag) you easily can show/hide elements:

$btn1 = $('#btn1');
$pnl1 = $('#pnl1');
$pnl2 = $('#pnl2');

$btn1.click(function(){
    $pnl1.show();
    $pnl2.hide();
});

With this method all your content must be present on the site - it will not lazy load.

You could also use Ajax to load content when needed.

Upvotes: 1

Related Questions