質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

  • HTML

    9595questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7116questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6216questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Readmore.jsで画像を続きから読む

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 997

mirin300

score 7

現在私はポートフォリオサイトの作成中で、Readmore.jsをつかってバナーと説明文をよくブログで見られる「続きから読む」のようにボタンで表示、非表示をしたいと思っていますが、自分で試した所自分のやり方が悪いのかうまく表示できませんでした。

URL. http://jedfoster.com/Readmore.js/
こちらからダウンロードしました。

read moreとcloseの表示はありますが、画像が隠れずに表示されてしまうので今困っています。

イメージ説明

すごくざっくりで申し訳ないのですが、レイアウトは上記の画像のようになっています。
左の長方形がバナー画像で右が説明分です。
真ん中のread morは多分floatの関係で真ん中にあるだけだと思います。

高さの位置的には問題無いかもしれませんが画像が隠れていなかったりと問題があるのでよろしくお願いいたします。

仮にこのReadmore.jsでは無理だということでしたら、大変申し訳ありませんが、かわりに何か同様の事が出来るプラグインを教えていただけませんでしょうか?

よろしくお願いいたします。

                <h2>WORK</h2>
                <article class="work">
                    <div class="work_box cf">
                        <div class="work_left">
                            <img src="./css/images/bnr_01.jpg" alt="テスト">
                        </div>
                        <div class="work_right">
                            <h3>テスト(1)</h3>
                            <p>テスト</p>
                        </div>
                    </div>
                    <div class="work_box cf">
                        <div class="work_left">
                            <img src="./css/images/bnr_02.jpg" alt="テスト">
                        </div>
                        <div class="work_right">
                            <h3>テスト</h3>
                            <p>テスト</p>
                        </div>
                    </div>
                    <div class="work_box cf">
                        <div class="work_left">
                            <img src="./css/images/bnr_03.jpg" alt="テスト">
                        </div>
                        <div class="work_right">
                            <h3>テスト</h3>
                            <p>テスト</p>
                        </div>
                    </div>
                    <!-- .work_box -->
                </article>
                <!-- #work -->
            </div>
            <!-- #work_wrapper -->
HTML
#work_wrapper{
  width: 950px;
  margin: 0 auto;
  padding-bottom: 50px;
}
#work_wrapper h2{
  font-size: 60px;
  text-align: center;
  padding: 90px 0;
}
#work_wrapper a{
}

.work_box{
  width: 950px;
  padding-bottom: 60px;
}
.work_left{
  float: left;
}
.work_right{
  float: right;
}
.work_right h3{
  padding-bottom: 20px;
}
css
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mirin300

    2017/03/02 03:49

    URL追加いたしました。ご指摘ありがとうございます。http://jedfoster.com/Readmore.js/

    キャンセル

  • s8_chu

    2017/03/02 04:18

    1点確認したいですが、画像が隠れていないと質問文にありますが、これはバナー画像を表示させたくないということですか?

    キャンセル

  • mirin300

    2017/03/02 07:50

    ページ表示時には、隠れている状態にしたくてボタンを押したら表示されるようにしたいです。

    キャンセル

回答 2

+7

的外れかもしれませんが、このような挙動でしょうか?
バナー画像が隠れずに表示されてしまうということなので、visibilityプロパティを使って画像の表示を消しておき、moreReadがクリックされたときにvisibilityプロパティの値を変化させて画像を表示させています。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #work_wrapper {
            width: 950px;
            margin: 0 auto;
            padding-bottom: 50px;
        }

        #work_wrapper h2 {
            font-size: 60px;
            text-align: center;
            padding: 90px 0;
        }

        .work_box {
            width: 950px;
            overflow: hidden;
            padding-bottom: 60px;
        }

        /* 追加 */

        .readMore, .readLess {
            display: block;
            width: 100%;
            margin-bottom: 50px;
            border-bottom: solid 1px black;
        }

        .work_box::after {
            content: " ";
            display: block;
            clear: both;
        }

        .images {
            visibility: hidden;
        }

        .work_left {
            float: left;
            width: 50%;
        }

        .work_right {
            float: right;
            width: 50%;
        }

        /* 追加ここまで */

        .work_right h3 {
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="work_wrapper">
    <h2>WORK</h2>
    <article class="work">
        <div class="work_box cf">
            <div class="work_left">
                <img class="images" src="https://placehold.jp/150x150.png?text=bnr_01.jpg" alt="テキスト">
            </div>
            <div class="work_right">
                <h3>テキスト(1)</h3>
                <p>
                    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
        </div>
        <div class="work_box cf">
            <div class="work_left">
                <img class="images" src="https://placehold.jp/150x150.png?text=bnr_02.jpg" alt="テキスト">
            </div>
            <div class="work_right">
                <h3>テキスト</h3>
                <p>
                    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
        </div>
        <div class="work_box cf">
            <div class="work_left">
                <img class="images" src="https://placehold.jp/150x150.png?text=bnr_03.jpg" alt="テキスト">
            </div>
            <div class="work_right">
                <h3>テキスト</h3>
                <p>
                    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            </div>
        </div>
        <!-- .work_box -->
    </article>
    <!-- #work -->
</div>
<!-- #work_wrapper -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>
<script>
    $(function () {
        $('.work_box').readmore({
            moreLink: '<a href="#" class="readMore">続きを見る</a>',
            lessLink: '<a href="#" class="readLess">閉じる</a>',
            beforeToggle: function (trigger, element, expanded) {
                if (!expanded) {
                    element.find(".images").css({"visibility": "visible"})
                } else {
                    element.find(".images").css({"visibility": "hidden"})
                }
            }
        });
    });
</script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

画像を続きから読む

とりあえず簡単なサンプルで出来ているので、Readmore.js の実行の仕方(開閉する対象の選択)に問題があるのでは?

動くサンプル:https://jsfiddle.net/u3m60bas/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • HTML

    9595questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7116questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6216questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。