jQueryもっと見るボタンを追加方法

CSS3からの変更点

「jquery.min.js」をダウンロード致します。
ダウンロード先

cssを記載

下記のソースを追加してください。

.js-load {
	display: none
}
.js-load.active {
	display: block
}
.is_comp.js-load:after {
	display: none
}
.btn-wrap, .lists, .main {
	display: block
}
.main {
	max-width: 400px;
	margin: 0 auto
}
.lists__item {
	padding: 40px 16px
}
.lists__item:nth-child(2n) {
	background: #efefef
}
.btn-wrap {
	padding: 16px;
	text-align: center
}
.btn-wrap .btn {
	display: inline-block;
	line-height: 16px;
	padding: 18px 16px;
	border-radius: 4px;
	border: 1px solid #bbb
}

HTMLを記載

下記のソースを追加してください。

    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
 
    • タイトル
 
    • テキスト
     





Javascriptを記載

下記のソースを追加してください。


サンプル

下記のソースをお使いください。
表示サンプルを掲載いたします。
詳細内容はこちら(もっと見る)

参考サイト
[related_posts_by_tax posts_per_page="4"]