[Resolved] How to use codepen code to generatepress?

[lee]

I see tom and leo, recommend the codepen.io code

test a codepen.io code insert into a wordpress post or pages

Can’t succeed !!!!!

Can you teach me????

for example
https://codepen.io/tgallimore/pen/awGzD

[img]https://i.imgur.com/t619Hdo.jpg[/img]

[img]https://i.imgur.com/oehBxbV.jpg[/img]

[img]https://i.imgur.com/YOsa2HV.jpg[/img]

[img]https://i.imgur.com/KIfZvb4.jpg[/img]

Can’t succeed !!!!!
Can’t succeed !!!!!
Can’t succeed !!!!!
Can’t succeed !!!!!

[Leo]

Hi there,

Can you try the JS code in wp_footer?

[lee]

<script>
    $('.tabgroup > div').hide();
$('.tabgroup > div:first-of-type').show();
$('.tabs a').click(function(e){
  e.preventDefault();
    var $this = $(this),
        tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
        others = $this.closest('li').siblings().children('a'),
        target = $this.attr('href');
    others.removeClass('active');
    $this.addClass('active');
    $(tabgroup).children('div').hide();
    $(target).show();
  
})
    
</script>
<script>https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js</script>

wp_footer
wp_head

Can’t succeed !!!!! Format failed

[Tom]

Try replacing all $ instances with jQuery.

[lee]

Hi tom

First
Try replacing all $ instances with jQuery.

<script>
jQuery(document).ready(function() { 

(function (jQuery) { 
    jQuery('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
    
    jQuery('.tab ul.tabs li a').click(function (g) { 
        var tab = jQuery(this).closest('.tab'), 
            index = jQuery(this).closest('li').index();
        
        tab.find('ul.tabs > li').removeClass('current');
        jQuery(this).closest('li').addClass('current');
        
        tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
        tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
        
        g.preventDefault();
    } );
})(jQuery);

});
</script>
<script>https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js</script>

hook wp_footer or wp_head ok

then

Code Module GeneratorCode Module Generator

<style>@import url(https://fonts.googleapis.com/css?family=Roboto:300); .tab { padding-top: 50px; margin-bottom: 20px; position: relative; overflow: hidden; background: #fff; width: 70%; margin: 0 auto; font-family: 'Roboto', sans-serif; line-height: 1.5; font-weight: 300; color: #888; -webkit-font-smoothing: antialiased; } .tabs { display: table; position: relative; overflow: hidden; margin: 0; width: 100%; } .tabs li { float: left; line-height: 38px; overflow: hidden; padding: 0; position: relative; } .tabs a { background-color: #eff0f2; border-bottom: 1px solid #fff; color: #888; font-weight: 500; display: block; letter-spacing: 0; outline: none; padding: 0 20px; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-bottom: 2px solid blue; } .tabs_item { display: none; padding: 30px 0; } .tabs_item h4 { font-weight: bold; color: blue; font-size: 20px; } .tabs_item img { width: 200px; float: left; margin-right: 30px; } .tabs_item:first-child { display: block; } .current a { color: #fff; background: blue; } </style><div class="tab"> <ul class="tabs"> <li><a href="#">Tab01</a></li> <li><a href="#">Tab02</a></li> <li><a href="#">Tab03</a></li> </ul> <!-- / tabs --> <div class="tab_content"> <div class="tabs_item"> <img src="https://cdn.dribbble.com/users/545884/screenshots/3695553/news.png"> <h4>Tab 01 Neque ipsum dolor.</h4> <p>Consectetur adipisicing elit. Neque, repellat facilis totam ab eos distinctio sint atque maiores! Dignissimos, molestiae, rem accusantium iure vitae voluptatum voluptas repudiandae deserunt dolore quis! Quisquam mollitia eius sed.</p> </div> <!-- / tabs_item --> <div class="tabs_item"> <img src="https://cdn.dribbble.com/users/545884/screenshots/3576036/liberosis_--_10.png"> <h4>Tab02 Maiores, suscipit</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, suscipit, eaque asperiores neque numquam nam possimus dolorem ipsa aspernatur reiciendis?</p> </div> <!-- / tabs_item --> <div class="tabs_item"> <img src="https://cdn.dribbble.com/users/545884/screenshots/3557299/mo-t.png"> <h4>Tab03</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, excepturi, minima, corporis deserunt quia quae sit officiis labore inventore autem a delectus consequuntur voluptatem modi eligendi similique sed nam vitae.</p> </div> <!-- / tabs_item --> </div> <!-- / tab_content --> </div> <!-- / tab --><script>$(document).ready(function() { (function ($) { $('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current'); $('.tab ul.tabs li a').click(function (g) { var tab = $(this).closest('.tab'), index = $(this).closest('li').index(); tab.find('ul.tabs > li').removeClass('current'); $(this).closest('li').addClass('current'); tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp(); tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown(); g.preventDefault(); } ); })(jQuery); });</script>

ok.

but,If use simple css Add to css and wordpress editor html , hook wp_footer or wp_head js Unable to output

[lee]

Sorry

codepen.io scss to css ok

hahaha

[Tom]

All working now? 🙂

[Author]

Posts