how to display different codes/tags to mobile devices?

Question

I am using wordpress responsive theme and I have a long content on the main page.

Is it possible to hide the content and make a link instead of the content If website is displaying by mobile device? If users click to link then I want the long content to be shown.

For example;

Display by computers:

<div id="long_content">
.............
.........................
..............long....content....................
</div>

Display by Mobiles:

<a href="#" id="click_to_read">Click here to read the content</a>

<div id="long_content" style="display: none">
    .........................
    ..............long....content....................
    </div>

score 0 · Answer 1 · edited Apr 30 '18 at 12:53

0

$(document).ready(function(){     
  var uagent = navigator.userAgent.toLowerCase();

  if(uagent.search("iphone") > -1)
  {

    $('body').html("<a href='#' id='click_to_read'>Click here to read the content</a>") 
  }

  $('#click_to_read').click(function(){

  $('#long_content').show();});

});

edited Apr 30 '18 at 12:53

Samvel Aleqsanyan

2,495
4
18
27

answered Dec 09 '13 at 13:18

Hadash

218
1
2
7

Thanks for that. My jquery knowladge is not very good. I tried this on jsfiddle >>> http://jsfiddle.net/w2Q3r/ nothing happend. `if($(document).width < 900) { Click here to read the content}` this doesn't seem right. – Johnny Dec 09 '13 at 13:34
1

the code above is not correct .. you are trying to output an HTML element in JS .. you either do append, after ... etc using jQuery. But still with that, the logic above is not correct – AhmadAssaf Dec 09 '13 at 14:10

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

So I have used two plugins and they solved my problem. Plugins are:

WP Mobile Detect

WP Mobile detect gives you the ability to wrap that infographic in a [notdevice][/notdevice] shortcode so at the server level WordPress will decide to show that content only if the user is NOT on a phone or tablet. Alternatively you can wrap a link and corresponding text to that info graphic in a [device][/device] shortcode as a way for the visitor to consume that content if they so choose.

Collapse o matic

adds an [expand title="trigger text"]hidden content[/expand] shortcode that will wrap any content—including other shortcodes—into a lovely jQuery expanding and collapsing div.

how to display different codes/tags to mobile devices?

2 Answers2

WP Mobile Detect

Collapse o matic